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:
tab nav

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.


  1. TheGirl says:

    currently doing a presentation for school, this is just the sort of thing I was looking for, thankyou :)

  2. dave says:

    How do you setup the tabs to be equal lengths?

  3. webfoo says:

    By adding the same amount of text, specifying the actual length is not the right approach.

  4. WJ says:

    After trying three others, this was the first one I got working and it worked very fluently! Thanks!

  5. 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.

  6. I also had problems with border-bottom. In ff was good but in IE… Now my problem is solved. Thanks

  7. Hosting says:

    Thanks for CSS Tabs tricks, i can now do good css for IE web pages! Thanks again!