CSS sliding doors & sprites with tabbed navigation - not looking so tabbed

Question

Hey, I'm trying to get this nav working nicely:

http://www.moreheadplanetarium.org/redesign/nav.html

I can't figure out why the background image of the "current" tab is extending behind the span of the link. It doesn't do this on the other states (normal and hover) - I've tested it with different images on those states because you can't really tell without the tab.

This is driving me crazy that the technique works on active and hover but not for a special class on the "current" items. Help would be greatly appreciated! Thanks~

Answer 1

I'm not sure how you think that the background image could not extend behind the span. The span tag is inside the anchor element like this:

+-----------+
|    +-----+|
|    |     ||
|    +-----+|
+-----------+

The span tag doesn't extend outside the anchor tag like this:

+--------+
|    +------+
|    |      |
|    +------+
+--------+

It does the same on all the states, the difference is that for the normal and hover states there is no transparent part of the span background where the anchor background can be seen (unless you look really closely on the shadow).

The solution is not to use transparency on the background image. Make it solid, looking like a shadow on the background.

This will also solve the problem with the double shadow. If you look closely you will notice that the shadow of the background image in the span tag is added to the shadow of the background image in the anchor tag, causing a darker shadow where they overlap. At the leftmost of the tab where you only have the background from the anchor tag, the shadow is lighter. The double shadow effect is on all the tabs, but for the normal and hover states it's so subtle that you have to know that it's there to see it.