Help with an ie tabs fix!

[andrew_biggart]

Ok i have started to design a site atm and i have created a tabs based menu! It works exactlly how it should in firefox but when i open it in inter(gay) explorer it moves the tabs up by 10 px please try and help me figure it out!

 

First of all you can see what i mean at http://server.microlite20.com/andrewbiggart.co.uk/Beluga_v1/default.htm

 

Ok this is the top nav div where the tabs are.

<div id="top_nav">
	<table class="t_topnav">
		<tr>
			<td class="buttons" style="width: 130px; height: 100px" valign="bottom">
			<a href="default.htm">
			<img alt="" src="homepage.png" width="120" height="80" id="img8" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img8',/*url*/'homepage_h.png')" class="style1" /></a></td>
			<td class="buttons" style="width: 130px; height: 100px" valign="bottom">
			<img alt="" src="aboutus_h.png" width="120" height="80" /></td>
			<td class="buttons" style="width: 130px; height: 100px" valign="bottom">
			<img alt="" src="menus.png" width="120" height="80" id="img3" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img3',/*url*/'menus_h.png')" /></td>
			<td class="buttons" style="width: 130px; height: 100px" valign="bottom">
			<a href="offers.htm">
			<img alt="" src="offers.png" width="120" height="80" id="img4" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img4',/*url*/'offers_h.png')" class="style1" /></a></td>
			<td class="buttons" style="width: 130px; height: 100px" valign="bottom">
			<img alt="" src="reviews.png" width="120" height="80" id="img5" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img5',/*url*/'reviews_h.png')" /></td>
			<td class="buttons" style="width: 130px; height: 100px" valign="bottom">
			<img alt="" src="functions.png" width="120" height="80" id="img6" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img6',/*url*/'functions_h.png')" /></td>
			<td class="buttons" style="width: 130px; height: 100px" valign="bottom">
			<img alt="" src="contactus.png" width="120" height="80" id="img7" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img7',/*url*/'contactus_h.png')" /></td>
		</tr>
	</table>
</div>

 

 

and this is the css for the top nav div.

#top_nav {
margin-top:30px;
width:1000px;
height:71px;
background-image:url('TabsBg.jpg');
background-position:center bottom;
background-repeat:repeat-x;
padding-bottom:20px;
}

 

and this is the css for the buttons td

td.buttons{
width:130px;
height:80px;
padding-right:10px;
text-align:right;
padding-bottom:21px;
padding-top:5px;
}

 

[Hybride]

Unfortunately, IE doesn't have a nifty CSS editor like FF; however, checking your CSS code, one thing I didn't see was this:

 

*{padding:0;margin:0}

This resets all of the browser's padding and margin discrepancies to 0 (each one has it set differently, I think IE has it by 2? I don't remember.)

 

You're also lacking a body tag, which may also be affecting your layout.