Successful Inline Lists In Netscape 4

One of the still (fairly) recent innovations in coding is the horizontal inline list. That is, a list (typically a ul) whose rendering is changed via CSS to display as a non-bulleted, horizontal line of text. It has come into vogue as a means for rendering horizontal navigation bars while maintaining semantically correct coding. Taming Lists gives a solid rundown of the basics of the inline list technique.

The technique simply uses the CSS rule display : inline applied to the li tags to make the bullet list render without bullets and horizontally. Up until now (as far as I know) no one was using this with Netscape 4 because of its infamous buggy CSS support. A typical example renders like this:

Compliant browsers when they render this CSS remove the bullet since the li is no longer being displayed as a list-item.

But by accident, I found a solution. As an exercise, I was recoding the new mozilla.org/Mozilla Foundation home page as a CSS-driven layout instead of a table-driven one. In my revision, I did the upper horizontal navigation bar (above the Google search field) as an inline list. All well and good.

I started playing with the code since it just bugged me that Netscape 4 couldn't get a clean horizonal layout minus the bullets. Then I hit on a technique for clean Netscape 4 inline lists. It renders like so:

The code to accomplish this is as follows:

li {
  display : inline;
  /*/*//*/
  display : none;
  /* */
}

(Here's a testcase to view as well. Note that in my rebuilt mozila.org page, the navigation is at the page bottom due to some other issues with the CSS as it applies to Netscape 4.)

Using display : none, in Netscape 4's twisted way of rendering, removes the bullets but not the textual content. Of course, we can't let compliant browsers act on the display : none or they will just hide everything. So Fabrice's Inversion is used to hide this code from the compliant browsers.

And there you have a basic inline list in Netscape 4! It even works in the really old 4.08 version without crashing. (Note too that my mozilla.org page will crash Netscape 4.0x because of other CSS that I'm not concerned with debugging, frankly.)

I don't know how much styling you could apply to the li to pretty it up without causing new problems in Netscape 4. It's an exercise for the reader. But at least where you have a nice-looked tabbed horizional navigation or the like, you can let it degrade it down to a basic horizontal bar in Netscape 4.