Skip to page content or Skip to Accesskey List.


Main Page Content

Successful Inline Lists In Netscape 4

Rated 3.68 (Ratings: 6)

Want more?

  • More articles in Code

Bill Mason

Member info

User since: 10 Oct 2000

Articles written: 5

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:

The technique fails because Netscape 4 keeps the bullet in front of the item, overlapping the text.

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 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:

This time, the items have no bullets remaining that overlap the text.

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 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 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.

Front-end web development (mostly) and an interest/focus in web accessibility. I also recently co-authored my first book, The Web Professional's Handbook, published by the late great glasshaus.

I've been out of work since October 2001. Be kind and glance over my portfolio....

The access keys for this page are: ALT (Control on a Mac) plus: is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.