views:

1943

answers:

4

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?

A: 

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

Greg
A: 

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

Arief Iman Santoso
+5  A: 

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)

jishi
Many thanks jishi! Your suggestion worked great, but now it's splitting up some of the links onto multiple lines - ie, because it's now inline text that's wrapping. Is there a way around this?
Yes, use white-space: nowrap; in the anchors. it's the same as wrapping the content in the deprecated `<nobr>`-tag
jishi
If you find my answer useful, then please mark it as the correct answer to your question.
jishi
A: 

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

Kon