Floating LI's in IE 6

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

Not that I can think of, I can't imagine how to declare a width that can change, except by defining it in ems. If you have a content that you know is likely to be less than ten characters, then width: 11em; padding: 0.5em 1em; is likely to offer enough space for the content while still defining a width.

Answer 2

IE 6 has some bugs with whitespace between <li> elements. Try putting all your list items on the same line with no space between them.

Edit: On further inspection, I don't think the whitespace is your problem. Your example has a lot of extraneous styles - it's hard to tell what the problem is.

Answer 3

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.