Eliminating DIV gap

[cjeanson]

Hello all, I have a question for those who are used to utilizing positioning with div's.I have added a CSS image map, and have run into a snag regarding the inherent gap that my div's now have created between the header image (image map) and the next bit of dynamic content.Since I am working around a software cms system in place, I do not have complete control over the code, meaning I cannot create (and close) a new division to pull the remaining content up to close the gap. Well, this wouldn't be an ideal fix anyway.What would you suggest to eliminate this gap?Thankscss code:

#menu {	width					: 500px;	height					: 211px;}#menu a {  position: absolute;  text-decoration: none;}#menu a em {visibility: hidden; }a#home { 	position				: absolute;	right					: 525px;	top						: 179px;	height					: 10px;	  width					: 49px;		}a#account { 	position				: absolute;	right					: 400px;	top						: 179px;	height					: 10px;	  width					: 73px;		}a#shop { 	position				: absolute;	right					: 322px;	top						: 179px;	height					: 10px;	  width					: 47px;		}a#about { 	position				: absolute;	right					: 189px;	top						: 179px;	height					: 10px;	  width					: 77px;		}a#contact { 	position				: absolute;	right					: 76px;	top						: 179px;	height					: 10px;	  width					: 93px;		}a#home:hover { background-image: url(http://alteregosports.com/dir/1190/files/active_home.jpg); }a#account:hover { background-image: url(http://alteregosports.com/dir/1190/files/active_account.jpg); }a#shop:hover { background-image: url(http://alteregosports.com/dir/1190/files/active_shop.jpg); }a#about:hover { background-image: url(http://alteregosports.com/dir/1190/files/active_about.jpg); }a#contact:hover { background-image: url(http://alteregosports.com/dir/1190/files/active_contact.jpg); }/* Below is a fix for IE to ensure that the hover element disappears when not hovered over */a#home:hover,a#account:hover, a#shop:hover, a#about:hover, a#contact:hover { border: none; } .aesheader {	width					: 100%;	height					: 211px;	padding					: 0px;	border-collapse			: collapse;}.aesheadercontainer {	border-collapse			: collapse;	padding					: 0px;}.aesheaderleft{	padding					: 0px;	width					: 274px;	height					: 211px;}.aesheaderspacer{	width					: 100%;	background-image		: url(http://alteregosports.com/dir/1190/files/aesheader_spacer.jpg);	background-repeat		: repeat-x;	height					: 211px;}.aesheaderright{	padding					: 0px;	width					: 571px;	height					: 211px;}.aesheaderdata{	padding					: 0px;	width					: 100%;}

html code

<table class="aesheader"><tbody><tr><td class="aesheaderdata"><table class="aesheadercontainer"><tbody><tr><td class="aesheaderleft"><img src="http://alteregosports.com/dir/1190/files/aesheader_left.jpg" style="width: 274px; height: 211px" height="211" width="274" /> </td><td class="aesheaderspacer"> </td><td class="aesheaderright"><img src="http://alteregosports.com/dir/1190/files/aesheader_right.jpg" style="width: 571px; height: 211px" height="211" width="571" /></td></tr></tbody></table></td> </tr></tbody></table><div id="nav"><div id="menu"> <a href="http://alteregosports.com/index.cfm" id="home"><em>Home</em></a><a href="http://alteregosports.com/account.cfm" id="account"><em>Account</em></a><a href="http://alteregosports.com/page.cfm?PageID=56" id="shop"><em>Shop</em></a><a href="#" id="about"><em>About Us</em></a><a href="mailto:info@alteregosports.com" id="contact"><em>Contact Us</em></a></div></div>

[jlhaslip]

set margin:0 and padding:0 on the html element to see if that removes the gap.

[cjeanson]

set margin:0 and padding:0 on the html element to see if that removes the gap.

No didn't work, and it shouldn't because the div code basically creates 6 divs (5 divs inside of 1 parent div), and those linebreaks are inserted in spite of the positioning used.