CSS to display unordered list horizontally in IE 6 and 7

Question

I've created a template for WebSVN (see it in action here) and have worked hard to make it use web standards and validate. It looks great in most browsers, but as I feared, IE 6 and IE 7 can't quite hack it. In my case, the problem is that they refuse to render the unordered list for my navigation horizontally — they both display each <li> on a separate line and overflow the allotted vertical space. (IE 8 behaves correctly, and looks very close to Firefox and Safari, which was a pleasant surprise.)

I haven't been able to find a suitable solution on Google or SO. I would prefer a CSS fix, rather than JavaScript or something similar, although that's not entirely off the table. (Also, I don't care about the PNG transparency issue in IE 6 — it doesn't hurt readability at all, and IE 7 and 8 both handle it perfectly.)

---

Edit: Here are relevant snippets of HTML and CSS:

HTML

<ul id="links">
  <li class="diff"><a href="comp.php?repname=BYU+CocoaHeads&amp;compare[]=%2F@552&amp;compare[]=%2F@553">Compare with Previous</a></li>
  <li class="rev"><a href="revision.php?repname=BYU+CocoaHeads&amp;">Changes</a></li>
  <li class="log"><a href="log.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;&amp;isdir=1">View Log</a></li>
  <li class="download"><a href="dl.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;isdir=1" rel="nofollow">Download</a></li>
  <li class="svn"><a href="http://dysart.cs.byu.edu/chsvn/"&gt;SVN&lt;/a&gt;&lt;/li&gt;
  <li class="rss"><a href="rss.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;isdir=1">RSS feed</a></li>
</ul>

CSS

#links {
    padding: 0;
    margin: 0;
    text-align: center;
    background: url(images/bg-gray-light.png) repeat-x 0 top;
    border-bottom: solid 1px #a1a5a9;
}

#links li {
    font-size: 110%;
    display: inline-block;
    padding: 5px 5px 4px;
    white-space: nowrap;
}

---

Edit: Now that I've found a solution, the linked page won't (shouldn't?) misbehave any more in this situation, but will continue to be publicly available.

Answer 1

Check out http://css.maxdesign.com.au/listamatic/

or post your code so people can take a look

Answer 2

Assigning float:left to the li elements should work, IIRC.

Answer 3

It works fine for me in IE8 with compatability mode.

The only potential problem I can see is you don't specify margins on the list items. Try setting margin:0 and see if that helps.

Answer 4

It turns out that IE 6 and 7 don't implement inline-block as expected. Looks like I found a good solution, though... Using the following CSS works for those browsers, and preserves the correct formatting in newer browsers:

#links {
    padding: 0 0 4px;
    margin: 0;
    text-align: center;
    background: url(images/bg-gray-light.png) repeat-x 0 top;
    border-bottom: solid 1px #a1a5a9;
}

#links li {
    font-size: 110%;
    display: inline-block;
    padding: 5px 5px 0;
    white-space: nowrap;
}

* html #links li {
    display: inline;
}

I despise IE hacks.... I'm strongly considering including Pushup in my template.