Question

How do I cleanly style a HTML + CSS horizontal tab bar so that the tab bar has a line across the bottom that’s hidden or suppressed for the active tab?

In other words, I’m trying to do the same thing that StackOverflow does for its tags:

My tab bar is set up as an ordered list with

ul
{
  list-style: none;
}
li
{
  float: left;
}

Update: I’ve already poked around sites with Firebug to see how they do it, but I feel like I quickly get bogged down in details. For example, StackOverflow’s version has a border for the bottom of the whole div (which makes sense), and a white border for the bottom of the active tab (which makes sense), but then it makes the active tab’s border overlap the div’s border (and I’m not very clear on how it does that). It looks like Twitter Bootstrap does something similar. I’m trying to understand the general concept of how overlapping part of a container’s border with the content’s border works instead of copying and tinkering with CSS until I get something that appears to work.

Answer 1

All you need to do is put a bottom border on the <ul> (so that it stretches across) and then give the <li>‘s a selected class, and make that one have a 1-pixel higher height.

Here is a very simple example: http://jsfiddle.net/V6gzS/