PDA

View Full Version : CSS+Tables+IE8 = Gap?



chrisfromboji
Jun 29th, 2009, 06:40 AM
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>


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;
}


Anyone have any ideas how to fix this?

Thanks!

abduraooft
Jun 29th, 2009, 08:52 AM
It might be that mysterious gap (https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps)! Have a try by adding

#header td img{float:left;}

btw, don't you know why tables for layout is stupid (http://www.hotdesign.com/seybold/)?

chrisfromboji
Jun 29th, 2009, 08:22 PM
Sweet, that worked. Thanks!
Yeah, I'm aware that tables are the black sheep of the internet now, but I was just trying to mock up the site to get some feedback before I blow all of my content into it. Placing all the images and replacing the javascript hover images with css will definitely be interesting, so I'll probably be back with more questions, but for now you've solved my mockup problem.

Thanks again!