Multiple floats with padding not displayed in a line

Let's say you have a horizontal navigation bar with 10 links in it. If you wanted to be completely semantically correct, you would implement the navigation bar as an unordered list (i.e. <ul>), with each item being marked up as <li> (list item) and containing a link (i.e. <a>).

However, all lists are rendered vertically by default in all browsers. But you want a horizontal bar. One approach could be to float each link using the CSS float: left;, which would force all the links to float to the left, thereby sitting nicely next to each other in a horizontal line. The resulting XHTML and CSS code would be:

Sample HTML navigation bar

<div id="nav">
<ul>
<li><a href="http://www.wackomenace.co.uk/" title="Home [Accesskey: h]" accesskey="h"><strong>H</strong>ome</a></li>
<li><a href="http://www.wackomenace.co.uk/portfolio/" title="Portfolio [Accesskey: p]" accesskey="p"><strong>P</strong>ortfolio</a></li>
<li><a href="http://www.wackomenace.co.uk/cv/" title="Curriculum Vitae [Accesskey: v]" accesskey="v">C<strong>V</strong></a></li>
<li><a href="http://www.wackomenace.co.uk/hacw/" title="How a Computer Works [Accesskey: w]" accesskey="w">HAC<strong>W</strong></a></li>
<li><a href="http://www.wackomenace.co.uk/scripts/" title="Scripts [Accesskey: s]" accesskey="s"><strong>S</strong>cripts</a></li>
<li><a href="http://www.wackomenace.co.uk/writings/" title="Writings [Accesskey: r]" accesskey="r">W<strong>r</strong>itings</a></li>
<li><a href="http://www.wackomenace.co.uk/downloads/" title="Downloads [Accesskey: d]" accesskey="d"><strong>D</strong>ownloads</a></li>
<li><a href="http://tools.wackomenace.co.uk/" title="Tools [Accesskey: t]" accesskey="t"><strong>T</strong>ools</a></li>
<li><a href="http://www.wackomenace.co.uk/about/" title="About [Accesskey: a]" accesskey="a"><strong>A</strong>bout</a></li>
<li><a href="http://www.wackomenace.co.uk/contact/" title="Contact [Accesskey: c]" accesskey="c"><strong>C</strong>ontact</a></li>
</ul>
</div>

CSS to go with the HTML code above

#nav ul {
  margin-left: 0;
  padding-left: 0;
  white-space: nowrap;
}

#nav li {
  list-style-type: none;
}

#nav a {
  float: left;
  width: 96px;
  margin: 0;
  padding: 4px 0;
  background: #caeeff;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

#nav a:hover {
  background: transparent url(/i/6/trans.gif) top left repeat;
  color: inherit;
  opacity: 0.9;
  text-decoration: none;
}

#nav a strong {
  font-weight: normal;
  text-decoration: underline;
}

In compliant browsers, this looks like the following:

[Example]

However, when you try to do this, you end up in a bit of a pickle with Internet Explorer 6. This is because Internet Explorer does not seem to like multiple floated items, especially when these items are also padded using padding: 4px 0;, for example. What you end up with is something more like the following:

[Example]

Please note that in browsers other than Internet Explorer, the examples will both appear identical.

Workaround

After some debugging, it turns out that the problem is caused by floating the links (<a>) rather than the list item itself (<li>). No other browser seems to mind, however. Moving the float rule (float: left;) from #nav a (the links) to #nav li (the list items) solves the problem. However, as the float is no longer on the links, they are now treated as inline rather than block (remember that floating an item automatically makes it a block item). This simple problem can be fixed by adding display: block; to #nav a.

The necessary code changes are highlighted in the following snippet:

#nav li {
  float: left; <-- added
  list-style-type: none;
}

#nav a {
  float: left; <-- removed
  display: block; <-- added
  width: 96px;
  margin: 0;
  padding: 4px 0;
  background: #caeeff;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

Et voilà! A simple fix for yet another silly Internet Explorer bug.

NOTE: All the pages and code snippets are valid XHTML and CSS.