Full width navigation bar with CSS

Please, check this thread at CSS-D to know what this document is about.

The easiest way to imitate a table display is... guess what... use a table. Yes, I hear you screaming. But, what if I told you that you can achieve the same presentation by using the display property with values such as table, table-cell and table-row values?

Unfortunately, Microsoft Browsers (both Windows and Mac) don't know how to apply these values. We'll address that in a moment.

Now, let’s take a look at the markup:

<div id="menu">
    <ul>
        <li>
            <a href="...">...</a>
        </li>
        <!-- other list items -->
    </ul>
</div>

Modern Browsers

Think about this as a table: the div will act as the table element, ul will be the table-row, lis will be the cells:

#menu {
    display: table;
}

ul {
    display: table-row;
}

li {
    display: table-cell;
}

Now, add some widths to the mix and, tada, it’s done (see source code for the complete CSS).

This method works (or should work) for these browsers:

• Opera 7.54+ (tested)
• Moz 1.6+ (tested)
• Firefox 1.0.1+ (tested)
• Safari 1.3+ (tested, probably 1.2 too)
• Camino 0.8 (tested)
• Konqueror 3.2 (should work, not tested)
• Omniweb 5.1 (should work, not tested)

Does this method work in your browser? Tell me about it.

Microsoft Browsers

Windows

Give the li an inline display and specify a width. Done (almost, far from perfection). Use some hackery to feed the rules just to Win/IE, something like this:

/* Hides from IE Mac \*/
* html #menu li {
    display: inline;
    width: 14.2%; 
}
/* width matches (100% - some space for rounding errors) / seven items */

Known to work in IE5+.

Macintosh

Mac IE requires a display of inline-block for this method to succeed:

* html #menu li {
    display: inline-block;
    width: 14%; /* More space for rounding errors? Whitespace bug? Don't know at the moment */
}

Known problems

To do.

Comments

Something to say? Discuss this method.

Document created on 2005/09/05. Last update: 2005/09/06. Location maybe temporal. As this doc has an XML prolog, it's rendered in quirks mode by IE browsers.