What's wrong with this CSS? (code included)

The following menu/navigation code won't hold up in IE6, but will in IE7 +
FF :

ul {
padding-left: 15px;
margin: 4px 0 0 0;
}
#menu {
list-style:none;
position:absolute;
background-color:#142538;
height:20px;
width:100%;
top:490px;
margin:0;
padding:0;
border-top:1px solid #fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
font-weight:bold;
text-transform: uppercase;
}
#menu li {
float:left;
}
#menu li a span.option {
height:20px;
padding:4px 15px;
display:block;
border-right:1px solid #fff;
color:#E3EDF0;
}
#menu li a:hover span.option {
background-color:#d96d21;
color:#fff;
}

MARKUP : ----------------

<ul id="menu">
<li><a href="main.php"><span class="option">Accueil</span></a></li>
<li><a href="services.php"><span class="option">Services</span></a></li>
<li><a href="suppliers.php"><span
class="option">Fournisseurs</span></a></li>
<li><a href="contact.php"><span class="option">Nous
Contacter</span></a></li>
<li><a href="submission.php"><span class="option">Demande de
Soumission</span></a></li>
</ul>

-----------------------------

Proposed solution (4 edits) :

#menu li {
display: inline;
float: left;
white-space: nowrap;
text-align: center;
width: auto; <------
_width: 10px; <------
}
#menu li a {
height: 20px;
padding: 4px 15px;
display: block;
border-right: 1px solid #fff;
color: #E3EDF0;
width: auto; <------
}
#menu li a:hover {
background-color: #d96d21;
color: #fff;
width: auto; <------
}

This will wrap the li's tightly around the content (button text), and let
said content dictate the length of the li. This is necessary for IE6 only.

Is this the appropriate fix for this problem?

Here's the code in action, without the fix :
http://www.vilverset.com/main.php

Thanks!

..oO(Mike)

The following menu/navigation code won't hold up in IE6, but will in IE7 +
FF :
[...]

Proposed solution (4 edits) :

#menu li {
display: inline;
float: left;
white-space: nowrap;
text-align: center;
width: auto; <------
_width: 10px; <------
}
#menu li a {
height: 20px;
padding: 4px 15px;
display: block;
border-right: 1px solid #fff;
color: #E3EDF0;
width: auto; <------
}
#menu li a:hover {
background-color: #d96d21;
color: #fff;
width: auto; <------
}

This will wrap the li's tightly around the content (button text), and let
said content dictate the length of the li. This is necessary for IE6 only.

Is this the appropriate fix for this problem?

It should be enough to just fix the list items (google for 'hasLayout'
to understand what brainded crap IE 6 is doing there). Usually you can
achieve the intended result by either giving them a width or height or
with the proprietary 'zoom' property:

#menu li {zoom: 1}

If necessary simply add the links as well:

#menu li, #menu a {zoom: 1}

This fixes a lot of float-related problems in IE 6 and is best put into
a separate stylesheet for IE 6 only (see conditional comments).

HTH
Micha