Horizontal Menu Problem

The Problem

A simple horizontal menu is rendered differently by common browsers, meaning it cannot easily be used in a layout. One solution, that works in Firefox 3, is to add a line-height of 16 pixels to the UL element. This sometimes causes the list to be a different height than the bar behind it when zooming in or out though. Also the use of different fonts and font sizes can change the height of the bar behind the list. For example, when Firefox uses Times the list fits the bar's height, but when Times New Roman is applied to the body of the document, the heights of the bar and the list no longer match.

If anyone knows of a true cross-browser solution that doesn't rely on browser-specific hacks, let me know!

Screenshots

Firefox 2

A gap appears at the bottom of the menu.

Firefox 3 Beta 5

A large gap appears at the top of the menu and a small gap below.

Firefox 3 Beta 5 (zoomed once)

Zooming in once removes both gaps.

Firefox 3 Beta 5 (maximum zoom)

Zooming to the maximum allowed size shows a 1-pixel gap above and below the menu.

Internet Explorer 8 Beta 1 (IE8 Standards Mode)

IE8 appears not to render the top and bottom padding of the list items when in Standards Mode. It also displaces the focus position (the blue border) of the items in the Developer Tools, showing an offset from the left edge by a value of 17. This value is 418 in the following screenshot.

Also the hover effect fails over the left side of the menu items.

Internet Explorer 8 Beta 1 (IE7 Strict Mode)

Note how the blue border is correctly shown around the first list item, which has a left offset value of 418.

Opera 9.5 Alpha

The menu is rendered perfectly (with no gaps above or below).

Safari 3

The menu is rendered perfectly (with no gaps above or below).

Details

Handwritten by Christopher Hester 22nd April 2008 · Last updated 27th June 2008. Based on the Listmatic Central Horizontal Boxes demo.