andrew_biggart Posted July 19, 2009 Share Posted July 19, 2009 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; } Link to comment https://forums.phpfreaks.com/topic/166503-help-with-an-ie-tabs-fix/ Share on other sites More sharing options...
Hybride Posted July 19, 2009 Share Posted July 19, 2009 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. Link to comment https://forums.phpfreaks.com/topic/166503-help-with-an-ie-tabs-fix/#findComment-878128 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.