Forum Moderators: open
I have a simple table that allows to browse to other pages.
In IE it is perfectly positioned above the picture where I want it. In FF it appears approx 15px lower.
How can I change this?
<div class="style30" id="Layer6" style="position:absolute; width:477px; height:440px; z-index:2; left: 315px; top: 146px; visibility: inherit;">
<table width="477" border="0" cellpadding="0">
<tr>
<td width="99"><div align="center" class="style34"><a href="ServScandin.html">Scandinavia</a></div></td>
<td width="91"><div align="center" class="style34"><a href="ServBenelx.html">Benelux</a></div></td>
<td width="94"><div align="center" class="style34"><a href="ServicesAUCH.html">Austria Switzerland</a></div></td>
<td width="75"><div align="center" class="style34"><a href="ServEur.html">Europe</a></div></td>
<td width="96"><div align="center" class="style34"><a href="ServWorld.html">World</a></div></td>
</tr>
</table>
</div>
Thanks in advance
The first thing I'd do is check whether the table is actually lower or whether the surrounding content is positioned differently. With the absolute positioning you've got in the CSS rules, that table really shouldn't be anywhere else but exactly 146 pixels from the top of the containing element. So take two screenshots, one of each browser, and then measure the position in Photoshop or whatever image editing application you are using.
And as always when working with cross-browser display issues, first be sure that your mark-up validates:
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]