CSS for horizontal tab menus

I am having some fun (not!) in finalising some clean elegant css examples for my tab menu widget. I’m fussy – I want minimal markup, minimal css, no hacks & future proof code, as well as demonstrating or allowing a variety of styles.

Some difficulties so far:

list item (ol/ul li) white space

Yes it is there – for both Firefox and Internet Explorer! Not a problem if you want to space your menu items out, and/or are not doing interesting stuff with backgrounds. The answer for the widget I’m working on seems to be to have concise code!

See the test page with image examples here.

Rob Glazebrook has some comments on the whitespace problem here.

Some example ideas:

SMH example

More later…..

Related posts:

1. Making a set of nested div’s clickable like a link or href element The need: make a set of nested div’s clickable, like one big image The Auto CSS Layout generator has preview...
2. Category specific css to achieve a print “cover page” css look For a school’s online newsletter we wanted the “photo of the week” category to present differently from other posts. Ideally...
3. CSS for real html tables There are occasions when an HTML table is appropriate. One then wants the data to be presented well. Following are...
4. Subscribe2 widget markup and css Please refer to updated instructions. The wordpress subscribe 2 plugin is great. Version 4.9 just released – a wonderful alternative...
5. Why horizontal scrollbar? You think your html and css looking good and then you notice – a horizontal scrollbar when the site should...