It is popular to use ul and li elements float them and set them to width:auto in CSS in order to create a horizontal list of self-sizing boxes. These can easily be used to create horizontal navigation or a listing of tabs, and it works very well. However, there is one caveat; given the right mix of CSS this solution doesn’t work properly in IE 6.

To create this scenario, we can simply use something like the following:

<style type="text/css">
    ul {
        height: 30px;
        overflow: hidden;
    }
    ul li {
        float: left;
        width: auto;
    }
    ul li a {
        display: block;
        height: 30px;
    }
</style>
<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
</ul>

This will show the problem in IE 6 nicely. The problem is that IE 6 interprets this mix of CSS and decides that each li element should actually expand out to 100% width.

I’ll explain how to fix this issue and provide and example page so you can easily play around with the HTML and CSS yourself.

Read More→