Question

I’m building a navigation using the simple <ul><li></li><ul> system and floating them to the left side so they appear inline. The follow code works in all browsers except IE 6.

The HTML

<div id="sandbox_container">
    <div id="sandbox_modalbox">
        <div>
            <ul id="sandbox_modalbox_nav">
                <li id="Intro" class="modal_active"><a href="#Intro">Item 1</a></li>
                <li id="Queries"><a href="#Queries">Item 2</a></li>
            </ul>
        </div>
        <!-- more content here -->
    </div>
</div>

The CSS

#sandbox_container { 
    min-height: 385px; 
    width: 940px; 
    padding-bottom: 20px 
}
#sandbox_modalbox { 
    width: 940px; 
    padding-top: 5px; 
    margin-bottom: -10px;
}

ul#sandbox_modalbox_nav { 
    width: 936px; 
    height: 52px; 
    margin: 0px 2px 0px 2px;
    padding-top: 0px; 
    display: block; 
}
ul#sandbox_modalbox_nav li {
    height:52px; 
    float: left; 
    list-style: none;
    padding: 0px; 
    display: block; 
}
ul#sandbox_modalbox_nav li a { 
    padding: 12px 30px 0px 30px; 
    height: 52px; 
    display: block; 
}

I also put it up on JSBin.

I understand the problem is that I must define a width for the <li> for IE to float it properly, however I would prefer these remain variable width. Is there anyway to float them properly without restricting the width?

Answer 1

If I am understanding the problem correctly then in browsers other than IE6 the list items appear next to each other, but in IE6 they appear on top of each other.

If this is the case, it may be because the a elements are not floated even though their containing elements are. I would just use a conditional comment and add the following for IE6 only:

ul#sandbox_modalbox_nav li a { float:left; } 

Also, Neall is right on track with the whitespace issue, even if it doesn’t fix your current display problem it may cause some unwanted space to appear between items later.