Simplified CSS Tabs Trick

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 1×1 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.