IE6 horizontal list bug

I’ve come across a strange bug with IE6 where a horizontal list which has borders left on each list item (or anchor) repeats a border when it shouldn’t.

In the example below the 2nd last list item has two left borders, the second one repeating where the text wraps. Does anyone know how I can get rid of this?

<style type="text/css">
ul {
    margin: 0;
    padding: 0;
    width: 200px;
li {
    display: inline;
a {
    border-left: 1px solid red;
    <li><a href="#">test</a></li>
    <li><a href="#">test some more</a></li>
    <li><a href="#">test even more</a></li>
    <li><a href="#">and test again</a></li>

Yes it’s a bug and borders on inline elements in IE are unreliable. The white-space: nowrap will cure it but will make the whole link drop to the next line rather than partial text which is probably what you wanted anyway :slight_smile:

I found a workaround which is to float the list items left and add white-space: nowrap to the anchors.