Help aligning header and footer images

Hi all

I am designing a website which works in IE6 (my default browser) but have noticed a problem when viewing it in other browsers such as firefox, opera, safari. The problem is that the images used to create the top and bottom of the border do not sit correctly.

This is how it should appear (as per IE6):
www.engineeringpartners.com.au/new_page/screenshot.jpg

Here is the site:
www.engineeringpartners.com.au/new_page/index.html

Here is the CSS:
http://www.engineeringpartners.com.au/new_page/styles.css

Any help fixing this problem would be greatly appreciated. Also any suggestions on improving my website (codewise or design wise) are welcome too

 

In your html replace this

<div id="top_border"><img src="top.jpg"></div>

Code (markup):

With this

<div id="top_border"></div>

Code (markup):

and replace this

<div id="bottom_border"><img src="bottom.jpg"></div>

Code (markup):

with this

<div id="bottom_border"></div>

Code (markup):

Then add this to your style sheet

#top_border{background-image: url(top.jpg);height:7px;}

#bottom_border{background-image: url(bottom.jpg);height:7px;}

Code (markup):

Hope this helps!

Joel

 

Regarding suggestions for your site:

Ignite all of your images. http://www.ignite-it.co.uk

 

mate you are a legend. thanks so much for that it worked a treat
and so simple too