PDA

View Full Version : Extra Space Below Chrome Menu in IE8



WendyVonB
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.



#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
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?