Hi Guys, As you can see in the attached screenshots, the picture in IE7 is somehow of order. It should look like the IE8 screenshot but I have no idea how to fix that. Here is my css code: body { font-size:1em; font-color:black; font-family: serfi; } #sitewrapper { width:99.5%; min-width:600px; min-height:400px; height:99.5%; padding:0px; border:0px solid black; background-color:white; position:relative; } #sitewrapper li { width:6.2%; height:1em; min-width:80px; min-height:25px; margin-right:10px; margin-top:10px; float:left; text-align:center; background-image:url("tab_background2.JPG"); background-repeat:no-repeat; list-style:none; border:0px solid; } #ukcontainer li { width:6.2%; height:2.5%; min-width:80px; min-height:25px; margin-right:10px; margin-top:10px; float:left; text-align:center; background-image:url("tab_background2.JPG"); background-repeat:no-repeat; list-style:none; border:0px solid; } #dashboard_link,#tracking_link,#misc_link li { width:6.2%; height:2.5%; min-width:80px; min-height:25px; margin-right:10px; margin-top:10px; margin-bottom:-4px; float:left; text-align:center; background-image:url("tab_background2.JPG"); background-repeat:no-repeat; list-style:none; border:0px solid; } #ukcontainer,#zacontainer,#aucontainer { clear:both; width:98%; min-width:500px; min-height:300px; height:92%; margin-left:1%; margin-top:-10px; border:1px solid black; } a { text-decoration:none; color:black; } div.innerbox { width:100%; height:92%; border-top:1px solid black; margin-top:-25px; float:left; background-color:white; } h4.topLevelTabs { height:30px; width:78px; font-size:1.1em; margin:1px; } h4.subLevelTabs { font-size:0.9em; margin-top:4px; height:30px; width:78px; border:0px solid; } Code (markup): <html> <head> <title>Support</title> <link rel="stylesheet" type="text/css" href="css/printstyle.css"/> <script language="javascript" src="js/index.js"></script> </head> <body onload="hideInitialContent()"> <div id="sitewrapper"> <ul> <li id='uk_link' onMouseOver="changePic('uk_link')" onMouseOut="changePicBack('uk_link')" onClick="changePicPerm('uk_link')"> <!-- if you add another tab you need to add the id to index.js->topLevelTabsBackground array--> <a href="javascript:switchDiv('ukcontainer')"><h4 class='topLevelTabs'>UK</h4></a> </li> <li id='za_link' onMouseOver="changePic('za_link')" onMouseOut="changePicBack('za_link')" onClick="changePicPerm('za_link')"> <a href="javascript:switchDiv('zacontainer')"><h4 class='topLevelTabs'>ZA</h4></a> </li> <li id='au_link' onMouseOver="changePic('au_link')" onMouseOut="changePicBack('au_link')" onClick="changePicPerm('au_link')"> <a href="javascript:switchDiv('aucontainer')"><h4 class='topLevelTabs'>AU</h4></a> </li> </ul> <div id='ukcontainer'> <ul> <li id='dashboard_link' onMouseOver="changePicSub('dashboard_link')" onMouseOut="changePicBackSub('dashboard_link')" onClick="changePicPermSub('dashboard_link')"> <a href="javascript:switchDivSub('dashboard_content')"><h4 class='subLevelTabs'>Dashboard</h4></a> </li> <li id='tracking_link' onMouseOver="changePicSub('tracking_link')" onMouseOut="changePicBackSub('tracking_link')" onClick="changePicPermSub('tracking_link')"> <a href="javascript:switchDivSub('tracking_content')"><h4 class='subLevelTabs'>Tracking</h4></a> </li> <li id='misc_link' onMouseOver="changePicSub('misc_link')" onMouseOut="changePicBackSub('misc_link')" onClick="changePicPermSub('misc_link')"> <a href="javascript:switchDivSub('x')"><h4 class='subLevelTabs'>MIC</h4></a> </li> </ul> <div id='dashboard_content' class='innerbox'> dasdsadasds </div> <div id='tracking_content' class='innerbox'>tracking</div> </div> <div id='zacontainer'>za</div> <div id='aucontainer'>au</div> </div> </body> </html> HTML: