« Overturned | Main | Accessible Image Replacement »

Tuesday, August 05, 2003

Tri-modal CSS Tabs

For a recent web project, we needed to create a tab navigation system, but instead of just an "off" or "on" state to the tabs, they needed to have three states: "available and currently selected", "available but not selected", and finally "not available yet, and cannot be selected".

This is what I came up with

I've only tested in Safari, IE5, and Mozilla, so comments regarding other browsers would be greatly appreciated ;)

Comments

win2k firebird: http://rhapsodic.typepad.com/main/pharktab.jpg

Awesome!

I looked at it with IE5/IE6 on Windows, and it looks terrible, I'm not quite sure what the problem is.

Glad to see that Mozilla-based browsers get it right tho!

on IE6 on windows it's missing the top border on the top row of tabs. Otherwise it seems to look the same as Firebird.

Hei Jordan...did u looked at the CSS ?

Schietzboy - what's up with the CSS? I know it doesn't quite work in IE6 yet... I've been too busy working on other stuff so I haven't had a chance to fix it.

Mike

Mike,

Cool stuff...tried it under Opera 7.01 Win...Ugh...All the menu items end up in as a jumbled mess piled up on the left side of the main box.

James

Yeah they need some work :)

Yes! Its worked! Thanks)

Post a comment