Thanks for this Ethan.

Maarten,

To achieve the effect of only one tab looking “current”, you need to do 3 things:

1) Have a way to identify the current tab

2) Add a bottom border to all tabs

3) Remove the bottom border from the current tab

For (1), you can add a class “current” to the appropriate li element. [See note below for an alternative]

For (2), you’ll add a border-bottom to each tab’s inner span (adjusting the padding to account for the extra pixel used):

#navigation ul li a span {

...

padding: 5px 1em 4px 1em;

border-bottom:1px solid #979797;

}

For (3), you’ll add a rule which targets the current tab, and remove the border (effectively undoing the more general rule in step 2):

#navigation ul li.current a span {

padding: 5px 1em;

border-bottom: 0;

}

Note An alternative (better?) way to identify the “current” tab would be to give a unique id to each li element and use contextual selectors combined with unique page ids set on the body element, like this:

body#home #navigation ul li#nav_home { <em>somerules</em> }

Good luck,

Alan.