All,

Please take a look at the following site:
http://www.hpcoatingsinc.net/2005/index.php
It is predominantly done with CSS.

more specifically this page:
http://www.hpcoatingsinc.net/2005/concrete/concrete.php

When viewing this in IE it views fine, but in Netscape, Mozilla and Firefox, the image layer in the bottom center is shifted upwards about 15px and interferes with the visibility of the sample list in the center of the page. I am curious to know if maybe there is a CSS setting that I need to set for that layer that the Netscape family of browsers is looking for. If you compare them in IE and any Netscape browsers, you will see the difference.

Any help on this would be greatly appreciated.

__________________
Rob

It's the other way round. IE is broken.

You can *see* it when you reduce the height of .samples to 72 px. The resulting box (in Firefox) is

72px (height) + 5x (padding-top) + 5px (padding-bottom) = 82px

with your current setting of 92 pix you get
92px + 5px + 5px = 102px
and so the box will overlap with the box below.

This is absolutly perfect according to W3C specs.

Most likely your problem ist caused by your DTD. I did not test this (no time, sorry), so I suggest you just try and report if it works:

IE 6 shows your page in "quirks mode", thus applying the broken box model of old IE 5 which results in an incorrect box height.

Your site throws IE6 into quirks mode, because your DTD does not have a system identifier. The correct DTD in your case would be

which will set IE 6 into "almost standards" mode. Have a look at

http://hsivonen.iki.fi/doctype/

Change the DTD and set the height of .samples to a lower value. The box heights should be (almost) equal in all browsers.


As always, I recommend "code for Firefox, debug for IE".

HTH,
Alex