View Full Version : Extra Space Below Chrome Menu in IE8

01-15-2010, 09:40 PM
1) Script Title: Chrome Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/chrome-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.

width: 780px;
font: bold 16px;
font-family: "Gill Sans MT", "Century Gothic", Verdana, Arial;
margin: 0px;
padding: 0px;
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">
<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>


01-15-2010, 11:23 PM
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?