Float navigation broken in IE6

The navigation for my website renders correctly on other browsers except IE6.

The problem

Instead of the list appearing this way: Home | About | Services, each appears on a new line, eg:

Home
About
Services
Community Pages

and the <a> tag in the <li> fills up the entire width of the page.

I did not give the <li> a fixed width because: the length of the nav items are different and want take to take up spaces relative to their lengths.

My HTML

<div id="nav">
    <ul>
        <li class="top1space2"><a href="index.php" title="Go To Our Home Page" class="top1space3">Home</a></li>
        <li class="top1space2"><a href="#" title="More Jobs on Ngcareers">More Jobs</a>
            <ul>
            <?php $count=count($c_id);for ($i=0;$i<$count;$i++){ ?>
            <li><b><a href="category/<?php echo $c_slug[$i];?>" >&raquo; <?php echo $c_name[$i];?></a></b></li>
            <?php } ?>
            <li class="clearfloat">&nbsp;</li>
            </ul>
        </li>
        <li class="top1space2"><a href="graduatejobs.php">Graduate Jobs</a></li>
        <li class="top1space2"><a href="vacancy.php">Post A Job</a></li>
        <li class="top1space2"><a href="month.php" >Jobs This Month</a></li>
        <li class="top1space2"><a href="jobalert.php" >GSM Job Alert</a></li>
        <li class="top1space2"><a href="employers.php" >Employers</a></li>
        <li class="top1space2"><a href="submitcv.php"> Submit CV</a></li>
        <li class="top1space2"><a href="subscribe.php" >Subscribe</a></li>
        <li class="top1space2"><a href="advertise.php">Advertise</a></li>
        <li class="top1space2"><a href="/about/contact-us">Contact</a></li>
      </ul>
</div>

My CSS:

#nav ul {
    padding: 0px;
    width: 1020px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    list-style-type: none;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    height: 32px;
}
#nav ul li {
    float: left;
    display: block;
}
.top1space2 {
    background-color: #086DA1;
    background-image: url(../pics/slice1.jpg);
    background-repeat: repeat-x;
    display: block;
    height: 36px;
}
.top1space3 {
    color: #000;
    font-weight: bold;
    background-color: #F93;
    background-image: url(../pics/slice2.jpg);
    background-repeat: repeat-x;
}
#top1space3 {
    color: #FFF;
    font-weight: bold;
    background-color: #111;
    background-image: url(../pics/btnbg.jpg);
    background-repeat: repeat-x;
}
#nav ul .top1space2 a {
    color: #FFC;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    display: block;
    height: 36px;
    line-height: 36px;
    text-align: center;
    padding-right: 10px;
    padding-left: 10px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #9CF;
}
#nav ul .top1space2 a:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    background-color: #F93;
    background-image: url(../pics/slice2.jpg);
    background-repeat: repeat-x;
}
#nav ul .top1space2:hover {
    cursor: pointer;
}

Please how can I fix this in IE6, withouth开发者_如何学C giving the elements a fixed width?

---

Definitely an IE bug. IE6 (and IE7 as well I believe) rendering floated elements with width:auto as width:100%.

You can use this rule for IE6/7 to fix the layout.

#nav ul li {
    float: left;
    display: block;
    width:0;
    white-space:nowrap;
}

and either use a conditional comment to apply only to IE6/7 or more simply override to width:auto using a selector that IE6/7 doesn't understand, for example:

#nav ul li {
    float: left;
    display: block;
    width:0;
    white-space:nowrap;
}
#nav ul > li {
    width:auto;
}

---

Make your li elements inline (remove all floats from any element) and remove the display: block from your links. I've created a jsfiddle to show how it works. One thing to keep in mind: by removing all the floats and just displaying everything inline, you'll get a gap between the link elements in the list. There's a way to get rid of this (which I show in the jsfiddle) but it requires removing any space, including line-breaks, from between the li elements. It makes your markup a little messier, but I guess it's a matter of how much you care about that vs. how much you care about continuing to support IE6.

http://jsfiddle.net/WEmv9/4/

I also cleaned up the css declarations a lot - there were a lot of duplicate rules and unnecessary markup in there - obviously that's your choice, but it made the styles being applied much clearer to grok.

edit updated jsfiddle to make the 'home' link the right color