Different background tabs with different background on active?

[ktan]

Hi all - I'm having trouble making the active tab a different background for each tab (each tab also has a different background). I'm simply trying to change a flat color image, to a gradient color image. Here is the code:

#fmenu2 #one {
background-color: transparent;
background-image: url(../images/home/tab_drive.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#fmenu2 #two {
background-color: transparent;
background-image: url(../images/home/tab_navigate.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#fmenu2 #three {
background-color: transparent;
background-image: url(../images/home/tab_guide.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#fmenu2 #four {
background-color: transparent;
background-image: url(../images/home/tab_succeed.jpg);
background-repeat: no-repeat;
background-position: left top;
}

My question specifically is: How do I format the following to allow me to change the background on each tab coresponding to #one, #two, etc:

#fmenu2 ul li a.current{
color:#fff;
font-weight: bold;
text-align: center;
background-color: transparent;
background-repeat: no-repeat;
background-position: left top;
filter: Light;
}

Thanks in advance!

- K

[swa66]

On what element are the ids #one etc assigned ?

I'll assume it's on the <a> inside your #fmenu2 ul li ...

The problem you have is one of cascade and specificity:
#fmenu2 #four has a specificity of (0,2,0,0)
#fmenu2 ul li a.current has a specificity of (0,1,1,3)
And hence whenever
- the settings in those disagree, those of the one with the 2 ids wins out
- the settings do not conflict: both are applied

To fix this, since ids are unique you can probably do something like:

#one {
background-color: transparent;
background-image: url(../images/home/tab_drive.jpg);
background-repeat: no-repeat;
background-position: left top;
}

etc and then

#fmenu2 ul li a.current{
color:#fff;
font-weight: bold;
text-align: center;
background-color: transparent;
background-repeat: no-repeat;
background-position: left top;
background-image: none;
}

That would give the .current rule a higher specificity (letting it win in case of conflicting settings, and create the conflict on te background image to get it to be removed.

HTH

[ktan]

Thanks, swa66. This works, however it only allows me to use one image for the active tab, regardless of which tab is active, when i have something specified in "background-image".

Do you know how I can specify #one to have "example_one.jpg" as the background instead of "tab_drive.jpg" when it is inactive? And #two to have "example_two.jpg", etc?