Simplified CSS Tabs Trick
A notebook entry published on April 7, 2003
While trying anything and everything to get pure text, CSS tabs from an unordered list to work cross-browser — without adding extra elements, I came up with a nice little trick.
By adding an id="tabnav" to a single ul element, I then could style an unordered list into a tab-style navigation like this:
The trickiest part was getting the horizontal line to line up correctly with the row of tabs. One pixel off in either direction, and the illusion doesn’t work. I couldn’t quite get this to work right for every browser I was testing on by using CSS borders alone. So I ended up giving the #tabnav a single 1x1 grey pixel background image: background: url(/images/tab_bottom.gif) repeat-x bottom;, aligning it to the bottom and repeating it only horizontally to create the wide line. Then, by giving each #tabnav li a float: left;, adding padding and a grey border of the same color on all sides — I could then override the border-bottom with a white border for active tabs to give the effect that it is highlighted. The fact that that horizontal line is a background image is what makes this method work. A CSS border is assigned to every side, which will overlap the background that’s behind it (grey border on every side for normal tab, white bottom border for an active tab).
Using unordered list for navigation and styling them with CSS is nothing new, but the single pixel background trick worked great for me as far as lining up the tabs to the border — most importantly without having to use any extra divs or other hacks or positioning. Maybe others will find this useful.
TheGirl → www.diaryofagirl.net
currently doing a presentation for school, this is just the sort of thing I was looking for, thankyou :)
dave
How do you setup the tabs to be equal lengths?
webfoo
By adding the same amount of text, specifying the actual length is not the right approach.
WJ
After trying three others, this was the first one I got working and it worked very fluently! Thanks!
Benjamin Keil → www.mouthpunch.com/
Following your lead, I made simple a little more scalable by using em units and making the line at the bottom of the UL a border instead of an image. The trick to getting the borders to overlap is to use negative padding on the A elements.
Marko Petkovic → phcodes.atspace.com
I also had problems with border-bottom. In ff was good but in IE… Now my problem is solved. Thanks
Hosting → www.pocetak.com
Thanks for CSS Tabs tricks, i can now do good css for IE web pages! Thanks again!
Comments have been closed for this entry.
Bulletproof Web Design Second Edition New Riders
Web Standards Solutions The Markup and Style Handbook Friends of EdA tiny design studio founded by Dan Cederholm. We create simple interfaces balanced with a standards-based methodology, and we’re based in Massachusetts, USA.
Add your own
7 Comments