List Items turned into float:left blocks look strange in IE6

Question

I have a UL that looks like this:

<ul class="popular-pages">
    <li><a href="region/us/california/">California</a></li>
    <li><a href="region/us/michigan/">Michigan</a></li>
    <li><a href="region/us/missouri/">Missouri</a></li>
    <li><a href="region/us/new-york/">New York</a></li>
    <li><a href="region/us/oregon/">Oregon</a></li>
    <li><a href="region/us/oregon-washington/">Oregon; Washington</a></li>
    <li><a href="region/us/pennsylvania/">Pennsylvania</a></li>
    <li><a href="region/us/texas/">Texas</a></li>
    <li><a href="region/us/virginia/">Virginia</a></li>
    <li><a href="region/us/washington/">Washington</a></li>
</ul>

And CSS that looks like this:

ul.popular-pages li a { 
    display:block; 
    float:left; 
    border-right:1px solid #b0b0b0; 
    border-bottom:1px solid #8d8d8d; 
    padding:10px; 
    background-color:#ebf4e0; 
    margin:2px; color:#526d3f 
}
ul.popular-pages li a:hover { 
    text-decoration:none; 
    border-left:1px solid #b0b0b0; 
    border-top:1px solid #8d8d8d; 
    border-right:none; 
    border-bottom:none;
}

So it's working fine in modern browsers, but it's looking like this in IE6. Any suggestions?

Answer 1

What DOCTYPE are you using? DOCTYPE has an impact on how browsers render.

Answer 2

try use this CSS hack for IE6.

*html ul.popular-pages li a { 
    display:block; 
    float:left; 
    border-right:1px solid #b0b0b0; 
    border-bottom:1px solid #8d8d8d; 
    padding:10px; 
    background-color:#ebf4e0; 
    margin:2px; 
    color:#526d3f 
}

*html ul.popular-pages li a:hover { 
    text-decoration:none; 
    border-left:1px solid #b0b0b0; 
    border-top:1px solid #8d8d8d; 
    border-right:none; 
    border-bottom:none;
}

then adjust your CSS definition for IE6

Answer 3

The reason for your layout is probably because you have the float on the anchor, move it to the list-item instead.

ul.popular-pages li {
 float: left;
}

Since you're not setting any width in your LI's, I suggest skipping the float and set display: inline on your LI's instead, if you want them on a row.

Adjust with padding/margin to get appropriate spacing between them, and line-height to get correct behaviour for any eventual 2nd line.

That way you won't have problem with your UL not taking up space, without the need of a hidden clear-element at the end of the list (which is your other alternative)

Answer 4

You're floating your elements, so their parent needs to clear/reset the flow via the clearfix 'hack'.