Extra Space Below Chrome Menu in IE8

[WendyVonB]

1) Script Title: Chrome Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...rome-menu-bar/

I'm having an issue with extra spacing appearing below my menu, above the other divs. It appears only in IE8 (of course). Displays perfectly in Firefox.

#chromemenu{
	width: 780px;
	font: bold 16px;
	font-family: "Gill Sans MT", "Century Gothic", Verdana, Arial;
	margin: 0px;
	padding: 0px;
}
#chromemenu:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	margin-bottom: 0px;
}
#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(../menu/chromebg.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left;
}
#chromemenu ul li{
display: inline;
}
#chromemenu ul li a{
color: #494949;
padding: 5px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
#chromemenu ul li a:hover{
background: url(../menu/chromebg2.gif) center center repeat-x;
}

<div id="chromemenu">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../wireless.html">Wireless Broadband</a></li>
<li><a href="../dialup.html">Dial-Up</a></li>
<li><a href="../design.html">Web Design &amp; Hosting</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>

Thanks!

[ddadmin]

Hmm testing the above code in IE8, without or without a valid doctype, I see no extra space actually. Does the problem occur for you even on a blank page with just the above?