[Fwd: Pure CSS tabs]

[Steven Noels <st...@outerthought.org>]

fyi

-------- Original Message --------
Subject: 	Pure CSS tabs
Date: 	Tue, 25 Mar 2003 05:16:02 -0000
From: 	dive into mark <he...@hep>
Reply-To: 	f8dy@diveintomark.org
To: 	stevenn@outerthought.org



I've put up an example page
<http://diveintomark.org/public/tabs-example.html> to demonstrate the
technique I'm using for pure CSS tabs. As you can see from the source,
the "tabs" are actually an unordered list of links. Rotating the list
into a set of horizontal tabs is accomplished entirely in CSS.

Initial efforts using the obvious method (setting the |<li>| elements to
|display: inline|) fail in a variety of odd ways in a variety of
browsers, most notably Internet Explorer 5 for Macintosh (thanks, Joe).
The technique demonstrated here (and that I'm currently using throughout
my site) accomplishes the same effect, but it sets each |<li>| element
to |display: block| and |float: left|, and then uses a dummy spacer
element after the list to clear the float.

(Boy, I really sound like I know what I'm talking about, don't I? In
reality I have only the vaguest understanding of floats. This technique
quite literally came to me in a dream, and I hacked the details until it
looked good in 4 major browsers. This CSS stuff is /hard/; don't let
anybody tell you different.)

There is also a bit of wacky positioning to get the tabs to line up to
the bottom of the colored logo area, and a CSS hack to make the clearing
spacer invisible in Internet Explorer for Windows, where, amazingly, it
is simultaneously unnecessary and has undesirable side effects when
visible. And after all that, it works in Mozilla, Internet Explorer 6
for Windows, Internet Explorer 5 for Mac, and Safari, but not Opera.
Phooey. It's live anyway.

http://diveintomark.org/archives/2003/03/24/pure_css_tabs.html


-- 
Steven Noels                            http://outerthought.org/
Outerthought - Open Source, Java & XML Competence Support Center
Read my weblog at            http://blogs.cocoondev.org/stevenn/
stevenn at outerthought.org                stevenn at apache.org