21 Brilliant!

Nice work again Doug!

As usual – moving the boundaries forward, and thanks for sharing! We use a sort of ‘half’ version for the nav on our site, but you’ve taken this to something really cool (that final example is really nice).

posted at 07:54 am on October 22, 2003 by Sonia

22 IE 6 - Flashing Tabs

Nice article and technique but in Win IE 6 the tab backgrounds flash while mousing over. Looks nice and works as intended in Mozilla for me though.

posted at 08:06 am on October 22, 2003 by Dean

23 Great Article - BUT!!!

This is a great article – well explained in great style by Douglas. :->

But…
a more philosophical issue about tabs – are tabs a good User Interface Metaphor?

Their real use is in A4 ring binders in a paper-based meme and what they say is that they are card section dividers with more paper underneath.

In the web world they are dividers but there is nothing underneath – the information is on separate pages!

I just wonder if the recent popularity of tabs as a navigation method isn’t just a metaphor too far?

BTW this isn’t a rant – I am interested in people’s views

regards
Richard

posted at 08:11 am on October 22, 2003 by Richard Earney

24 Another CSS PowerUp

This is summat i myself have been messing with for a while, but how u have explained it will bring it to all the CSS starters which is great!

The less we rely on javaScript for Image roll overs and stuff like that the better!

Love the new design by the way and its great to have you all back :D

posted at 08:12 am on October 22, 2003 by Phunky

25 Same in IE 5.5

I get the flashing in IE 5.5 too.

Just playing the devil’s advocate here, but if we used the standard method of displaying tabs (i.e. using only images) then won’t screen readers read out the alt tags on the images? How is the sliding doors technique better for accessibility?

Love the technique and will look to using it but wanted to ask the question for the benefit of others who may be thinking the same.

posted at 08:14 am on October 22, 2003 by Paul Nattress

26 truly innovative

The possibilities of rich interfaces created with css is becoming much more of a reality due to articles like this one.

At our company, tabs are feared due to the either horrendous markup required to get something decent (tables, eeek!) or the flat nature of css tabs (until now!).

I’m not only humbled but truly enlightened that the possibilities of rich css design are still in the very early stages. It just takes people like Doug to figure them out.

posted at 08:18 am on October 22, 2003 by Lance E. Leonard

27 Welcome back ALA

Great look; I am grateful it turned out different to the pinkified “coming-soon” teaser. ;)

Richard Earney > What do you propose the “tabs” should be called? I won’t go so far to say that “tab” is a standard name, but it seems to be used with a good deal of regularity, from preference-pages in desktop-applications to the technique described in this article.

Semantically speaking I guess a more correct name would be an “unordered-list of anchors,” but it’s a bit of a mouthful. Maby a “list of links?” A “LOL?” ;)

posted at 08:45 am on October 22, 2003 by Conan

28 A few notes in response

Ray (from the very first comment): the images change names at the point I switch from opaque-corner images to transparent images. In other words, “norm_right.gif” is the opaque version, “right.gif” is the new transparent version. All (8) images are available in the same directory.

The “flashing” in IE/Win browsers is most likely due to the fact that you’ve turned off caching in preferences. Even without “a:hover” rules, IE has trouble holding a background image steady on anchors if you’ve specified “Every visit to the page” for temporary files.

The latest versions of Safari, Mozilla, and Firebird should not have any problems with rendering any of these examples, according to all the browsers we’ve seen.

I intentionally don’t cover any philosophical or usability issues related to the use of tabs, so that the article stays focused on a technique for an already widely popular interface metaphor. Whether tabs are appropriate for any site is up to the team or individual responsible for that site.

There are a few variations of the technique I didn’t cover, for the sake of keeping the article as short as possible. Like using a unique ID for each list item, then another on the body element to pinpoint the current tab, instead of moving around id=“current” from one list item to another. More complex image-changing rollovers would be possible with the same markup by using li:hover and a:hover to affect the background images too. But be wary of the fact that IE/Win currently does not support the :hover pseudo-class on any element other than an anchor.

Thanks for the feedback so far. Keep it coming.

posted at 08:49 am on October 22, 2003 by Douglas Bowman

29 great article

been looking for a reason to redesign some stuff and this article might well be the daddy.

fantastic looking site and excellent articles – as usual!

posted at 09:17 am on October 22, 2003 by ian burrett

30 Truly "A list apart"

Great article that shows there is no limits to what can be done with CSS. I would say that CSS is just starting to break into main stream.

I enjoyed the detailed outline of the article.
One thought is how would you be able to use something like pixy’s rollover effect for tabs like these in the article

posted at 09:22 am on October 22, 2003 by Blakems