CSS pos absolute issue in FF and IE

[dude9er]

Okay, this is interesting. I am trying to place an image on an image using z-index and the position property. I have it rendering in IE just fine, but FF is off by exactly 6px. Here is my CSS:

 <td width="81" height="100">
<div style="position:absolute; z-index:1; top: 346px;"><img src="images/legend/c1/c1-1.jpg" name="myImageC1" width="81" height="133" id="myImageC1">
                    <div style="position:absolute; z-index:10; left: 9px; top: 24px;"><img src="images/legend/c2/c2-1.jpg" name="myImageC2" width="65" height="83" id="myImageC2"></div>
              </div>
</td>

If I change top:346px of z-index:1 to top:340px it renders fine in FF but not in IE. I'm sure there is a very simple solution to this, however I have not been able to find it.

Here is the link to show the problem


Please, any advice would be much appreciated.

THANKS!

[techno_race]

Assign the styles within a browser sniffer JavaScript.

[mwinter]

Okay, this is interesting. I am trying to place an image on an image using z-index and the position property. I have it rendering in IE just fine, but FF is off by exactly 6px.

Your document is rendering under "Quirks" mode, and you are using a table-based layout. Neither are a good idea, and both can conspire to create rendering problems.

Assign the styles within a browser sniffer JavaScript.

Please do not recommend something like that to anyone ever again.