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

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

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;
}

<nobr>

*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;
}