jQuery Forum

As a proof of concept, I have developed a technique (pure CSS) to render tabs with transparent backgrounds, using the sliding doors technique.
The tabs resize to accomodate the amount of text on them, they use a single image of an oversized tab (no left hand and right hand side graphics)..they can also be semi-transparent, or slanted or interlocking
Only tested in FF, IE7, Opera & Safari on a Windows Vista Platform, so any feedback on other OS would be nice, ....and yes they will not work on IE6 (not been able to test on this platform)......
really best for you to see for yourself and let me know what you think.
<a href="http://www.pecche.com/demos/toolbar/">http://www.pecche.com/demos/toolbar/</a>
and as applied to an accordion type display    <a href="http://www.pecche.com/demos/accordion/">http://www.pecche.com/demos/accordion/</a>

Guys,
CSS file for vertically aligned tabs (left or right handed).......
.ui-tabs-nav and .ui-tabs-container are percentage widths and shrink as you minimise the page........
graphic is not too clever, but just to show that the sliding doors technique works .....
tested on IE7, FF, Opera and Safari on a Vista machine............
:-)

Klaus,
I have been playing around with the css to try and get a solid solution for UI tabs. (tested on FF,Opera and IE6 - Windows machine)..so should display OK on Safari for Windows and IE7..........perhaps somebody could test on a Mac ???
The method involves no floats for the tabs, and uses the sliding door technique, with negative margins, allowing for the use of gifs with transparent backgrounds.
Attached is a zipfile, simply unzip andplay.
There are four CSS files - pointing to four different graphics - using varying font sizes within the tabs, which should demonstrate, how the tabs work....
HTH  -:)