well known css ie6 bug

[kumarsena]

hey, just got into a problem with list menus and ie6. the distance between the list elements are extrememly large compared to what should be. ive tried setting margins and paddings and looked on google, but cant find anything. any help would be appreciated.

here is the code

css:

#menu {
padding-right:0;
background:#fff;
text-align:right;
font-size:px;
font-weight: bold;
margin-top:30px;
border-top:3px solid #64BE0C;
margin-left:5px;
}

#menu ul {
display:block;
padding:0px;
margin:0px;

}

#menu li {
display:block;
padding:0px;
list-style-type:none;
text-align:right;
margin:0px;
}

#menu li a {

display:block;
padding:10px;
margin-bottom:2px;
color:#000;
text-decoration:none;
vertical-align:bottom;
background:#eee;
border-bottom:1px solid #ccc;
}

html>body #menu li a {

width: auto;
}

#menu li a:hover {

color: #000000;
padding: 10px;
display: block;
background:#ddd ;

}

html:

<!-- menu div -->
<div id="menu">
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="about.html">About Us</a> </li>
<li> <a href="why.html">Why Us?</a> </li>
<li> <a href="how.html">How We Work</a> </li>
<li> <a href="contact.html">Contact</a> </li>

</ul>

maybe there is somethign obvious that im missing here..?

thanks!

kumar

[moltar]

It seems if I set the width for "#menu li" then it works fine. Even if I set it to 100% - it creates horizontal scrolling, but there is no gap. So if you set it to, say, 80%, you'll be fine. If you know the exact width it's supposed to be, then you can just set that.

#menu li { 
display:block;  
padding:0px;  
list-style-type:none;  
margin:0px;  
width: 99%;  
}

[createErrorMsg]

This is called the IE Whitespace-in-Lists Bug, and it's a result of placing a block level anchor in the list item. The simple fix is to set the LI to display:inline. This cures the bug without any side effects in compliant browsers.

cEM

[kumarsena]

hey! cool

tahnks alot guys. i knew this was a known bug.

appreciated!

kumar