CSS Block Alignment: Stacking a Horizontal List

The elegant design of http://www.alistapart.com/ features a menu at the top of relevant pages. The menu block is an unordered list with list item elements, li, set to float left. This is a semantically sound design choice but the reality of Microsoft Internet Explorer and, yes, even Firefox, requires some ‘serious’ CSS thought—especially when stacking and aligning is required.

An examination of “Block Alignment: Stacking a Horizontal List” in the Songhay System Cascading Style Sheet Highlights reveals the details of this thought. Here is an unordered list about unordered lists:

Selecting the ul block and declaring a border-top setting prevents unexpected spacing problems in Microsoft Internet Explorer 6.x. This one is extremely strange!
Selecting the ul block and declaring margin:0;padding:0; prevents unexpected spacing problems in Microsoft Internet Explorer 6.x (for margin) and Firefox 1.x (for padding).
The block following the ul block needs a clear setting—usually clear:both; to prevent the last list item(s) floating left.
Defining display:inline; instead of float:left; can remove the bullets from the list. This inline style is better when this is not an issue. I have to use the word ‘can’ because, somehow, over four years ago, Mark Newhouse avoids losing his bullets in “Practical CSS Layout Tips, Tricks, & Techniques.” I copy and paste his markup and lose the bullets.

The Songhay System Cascading Style Sheet Highlights has only been tested in Windows. Any comments/screen shots from other platforms are welcome. And, by the way, I am not saying that alistapart.com is not ‘serious’—a huge portion of my CSS ideas come examining their source code. It’s just that their unordered list menu is in a ‘banner’ or header form—securely attached to the top of the window. This may be the best arrangement for most platforms and the Songhay System design remains limited.

rasx()