Link color in user profile tabs (skin: Divine)

The link color for the tabs is the same color of the active, and nonactive tabs while the background info changes on your skin. Here's the css for my tabs as seen here:

http://www.potionsandsnitches.net/fanfiction/viewuser.php?uid=3?skin=harry1

I don't remember what controls what, but with a little fiddling you should be able to figure it out.

On the mouse scroll over, the font color and background changes to red on white.

Active tab is gold with black text. Non active tabs are red with black text (I think this is red: CC3300).

/* The following declarations control the tabs */
#tabs {
margin-top: 1em;
padding: 0;
}
#tabs UL {
font: bold 10px Verdana, sans-serif;
border-bottom: 1px solid #000;
padding: 3px 0;
margin: 0;
}

#tabs LI {
list-style: none;
margin: 0;
display: inline;
}

#tabs LI A {
color: #000;
background: #CC3300;
text-decoration: none;
border: 1px solid #000;
border-bottom: 1px solid #000;
padding: 3px 0.5em;
margin-left: 3px;
}

#tabs LI A:hover {
color: #CC3300;
background: #FFF;
border-color: #000;
}

#tabs #active A{
color: #000;
background: #EEC60C;
border-bottom: 1px solid #000;
}

#tabs #active A:hover {
color: #CC3300;
background: #FFF;
border-bottom: 1px solid #000;
}

I think you want to change the text color of #tabs LI A to white and #tabs #active A to navy.

There's got to be more to it than that. I fiddled a little, couldn't get it to work, and so saved a new copy of the style.css and just c&p your code wholesale over what I'd had, and it still looks nothing like your site, or like how it should.

This is what I had before, which has some distinct differences from your code:

/* The following declarations control the tabs */
/* The outer tab box */
#tabs { 
background: #392d8f; 
border-top: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
margin: 0;
padding: 0;
}


/* The individual tabs. */
#tabs span { 
font-size: 12px;
color: #fff;
background: #392d8f;
border: 1px solid #000;
padding: 3px;
line-height: 1.5px;
}

/* Links in the tabs */

#tabs #active {
background: #fff;
color: #392d8f;
}

I'm probably just being stupid--my knowledge of CSS comes from trial and error and looking at what other people have done--but this is really driving me crazy!

Don't forget that with css, if something is stated blow, it overwrites the things above. Check and see if you have other tab declarations below. Also, with different skins, sometimes they are set up to use different css names.

My tabs use a list, so the list items are what were changed. That wouldn't work on yours unless you were using a list too.

What I did when I had tab trouble, is I named the backgrounds an opposite color, like for your site I'd use red. Once I had both tabs with red background, I'd add the text color change. If you can get that to work, then you're set.

One thing you use that I don't is tabs span.

#tabs #active {
background: #fff;
color: #392d8f;

#tabs span {
font-size: 12px;
color: #fff;
background: #392d8f;

try moving span's color to

#tabs {
background: #392d8f;

you can also try adding a

#tabs A {
  color: #fff;

You named the tabs text colors, but not the tab's LINK text color. If you don't name a change in the link color, it will just use the link color of your whole site, in this case, dark blue.

Well, I kept poking at it and poking at other people's sites with similar code, and finally got it to do what I want. It's probably not the most elegant of code, but it works:

/* The following declarations control the tabs */
/* The outer tab box */
#tabs {
background: #392d8f;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
margin: 0;
padding: 0;
}
/* The individual tabs. */
#tabs span {
font-size: 12px;
background: #392d8f;
        color: #fff;
border: 1px solid #000;
padding: 3px;
}

/* Links in the tabs */
#tabs span A {
  color: #fff;
}   

#tabs #active {
background: #fff;
color: #392d8f;
}

#tabs #active A {
color: #392d8f;
}

Thanks for the help!