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?


<html>
<head>
<style type="text/css">
ul {
    margin: 0;
    padding: 0;
    width: 200px;
}
li {
    display: inline;
}
a {
    border-left: 1px solid red;
}
</style>
</head>
<body>
<ul>
    <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>
</ul>
</body>
</html>

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.