I'm working on a new website and the combination of CSS and Tables produces a 4 pixel gap at between my banner and my menu. Any ideas how to fix this? I attached a picture of what it looks like in Internet Explorer 8 and what it looks like (correctly) in Firefox 3. Here's the HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/website_mockup_10-11.png','images/website_mockup_11.png','images/website_mockup_12.png','images/website_mockup_16_hover.png','images/website_mockup_17_hover.png','images/website_mockup_18_hover.png','images/website_mockup_19_hover.png','images/website_mockup_20_hover.png','images/website_mockup_08_hover.png','images/website_mockup_09_hover.png','images/website_mockup_10-11_hover.png','images/website_mockup_11_hover.png','images/website_mockup_12_hover.png')"> <div id="wrapper"> <div id="header"> <table width="840" border="0" cellspacing="0" cellpadding="0"> <tr align="left" valign="top"> <td height="167" width="29" align="left" valign="top"><img src="Images/website_mockup_03.png" width="29" height="167" /></td> <td height="167" width="799" align="left" valign="top"><img src="Images/website_mockup_04.png" width="799" height="126" /> <table id="Header" border="0" cellpadding="0" cellspacing="0" align="left" valign="top" style="display:inline-table"> <tr align="left" valign="top" height="41" border="0" cellpadding="0" cellspacing="0"> <td width="25" height="41" align="left" valign="top"><img src="images/website_mockup_10.png" width="25" height="41" alt="" /></td> <td width="149" height="41" align="left" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/website_mockup_08_hover.png',1)"><img src="images/website_mockup_08.png" alt="Home" name="Home" width="149" height="41" border="0" id="Home" /></a></td> <td width="150" height="41" align="left" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Travel','','images/website_mockup_09_hover.png',1)"><img src="images/website_mockup_09.png" alt="Travel" name="Travel" width="150" height="41" border="0" id="Travel" /></a></td> <td width="150" height="41" align="left" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Media','','images/website_mockup_10-11_hover.png',1)"><img src="images/website_mockup_10-11.png" alt="Media" name="Media" width="150" height="41" border="0" id="Media" /></a></td> <td width="150" height="41" align="left" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Portfolio','','images/website_mockup_11_hover.png',1)"><img src="images/website_mockup_11.png" alt="Portfolio" name="Portfolio" width="150" height="41" border="0" id="Portfolio" /></a></td> <td width="150" height="41" align="left" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/website_mockup_12_hover.png',1)"><img src="images/website_mockup_12.png" alt="Contact" name="Contact" width="150" height="41" border="0" id="Contact" /></a></td> <td width="25" height="41" align="left" valign="top"><img src="images/website_mockup_13.png" width="25" height="41" alt="" /></td> </tr> </table></td> <td align="left" valign="top"><img src="Images/website_mockup_07.png" width="29" height="167" /></td> </tr> </table> </div> <div id="content"> asdf test 1234 </div> <div id="footer"> <table width="840" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/website_mockup_15.png" width="315" height="55" alt="" /></td> <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('HomeBottom','','images/website_mockup_16_hover.png',1)"><img src="images/website_mockup_16.png" alt="Home" name="HomeBottom" width="100" height="55" border="0" id="HomeBottom" /></a></td> <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TravelBottom','','images/website_mockup_17_hover.png',1)"><img src="images/website_mockup_17.png" alt="Travel" name="TravelBottom" width="100" height="55" border="0" id="TravelBottom" /></a></td> <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MediaBottom','','images/website_mockup_18_hover.png',1)"><img src="images/website_mockup_18.png" alt="Media" name="MediaBottom" width="100" height="55" border="0" id="MediaBottom" /></a></td> <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('PortfolioBottom','','images/website_mockup_19_hover.png',1)"><img src="images/website_mockup_19.png" alt="Portfolio" name="PortfolioBottom" width="100" height="55" border="0" id="PortfolioBottom" /></a></td> <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ContactBottom','','images/website_mockup_20_hover.png',1)"><img src="images/website_mockup_20.png" alt="Contact" name="ContactBottom" width="100" height="55" border="0" id="ContactBottom" /></a></td> <td><img src="images/website_mockup_21.png" width="42" height="55" alt="" /></td> </tr> </table> </div> </div> </body> </html> Code (markup): Here's the CSS: #wrapper { text-align: left; width: 857px; margin-top:5px; margin-left: auto; margin-right: auto; } #header { width:857px; margin-top:0px; border: none; display:block; overflow:hidden; padding:none; } /******************** Content ********************/ #content { width: 799px; height: 500px; margin-top:0px; margin-bottom:0px; font-family: Arial, Helvetica, sans-serif; position:relative; left:29px; text-align: left; color: FFFFFF; background-image: url(Images/bodybackground.png); background-repeat: repeat; } a:link { COLOR: #FFFFFF; } a:visited { COLOR: #FFFFFF; } a:hover { COLOR: #A2B964; } a:active { COLOR: #FFFFFF; } /******************** Footer ********************/ #footer { text-align:center; font-family: Arial, Helvetica, sans-serif; text-decoration: none; witdh:857px; margin-top:0px; } a:link { COLOR: #595F23; text-decoration:none; } a:visited { COLOR: #595F23; text-decoration:none; } a:hover { COLOR: #595F23; text-decoration:none; } a:active { COLOR: #595F23; text-decoration:none; } Code (markup): Anyone have any ideas how to fix this? Thanks!
Well... I'm going to be brutally honest with you... 1) Table for a fixed width row? Waste of code and 99% of serious developers will tell you that you shouldn't be using tables for layout. 2) That stupid malfing mm_ javascripted image swap nonsense was a bad idea a decade ago, it has NO PLACE on a modern page as you are just using script to do CSS' job. 3) If this is a new page, what are you coding in Tranny for? 4) You have multiple redundant properties in your CSS. 5) You have so much presentational markup in your HTML file that frankly, I'm not sure why you are even bothering with CSS in the first place. Solution? chuck it and start over with semantic markup and separation of presentation from content. There is very little reason for the HTML for that page to be much more than this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Home </title> </head><body> <!-- empty tags like SPAN and B below are image sandbags for sliding doors or glider-levin replacement - do not remove!!! --> <div id="pageWrapper"> <h1> Site Title <span></span> </h1> <ul id="mainMenu"> <li class="home"><a href="#" class="current">Home<span></span></a></li> <li class="travel"><a href="#">Travel<span></span></a></li> <li class="media"><a href="#">Media<span></span></a></li> <li class="portfolio"><a href="#">Portfolio<span></span></a></li> <li class="contact"><a href="#">Contact<span></span></a></li> </ul> <div id="content"> asdf test 1234 <!-- #content --></div> <div id="footer"> <ul id="footerMenu"> <li class="home"><a href="#" class="current">Home<span></span></a></li> <li class="travel"><a href="#">Travel<span></span></a></li> <li class="media"><a href="#">Media<span></span></a></li> <li class="portfolio"><a href="#">Portfolio<span></span></a></li> <li class="contact"><a href="#">Contact<span></span></a></li> </ul> <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): EVERYTHING else you are trying to do should be in the CSS, with no .js even needed. If you are willing to link me to a live copy of what you have so far for images and site design, I'm willing to show the CSS I'd use to implement that. As the comment says, most of the images would be applied via Glider-levin image-replacement, so that images off there's something to see and you have actual TEXT inside the links for things like search engines to see... It also means that I suspect your two dozen or so images used to build the page would be reduced to just two or three files using this technique (with zero change in appearance)