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:
Code:
<!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:
Code:
#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!