jQuery Tabbed Interface CSS Problem

Question

Hello!

I'm coding a tabbed interface using jQuery and whilst it all works, functionality wise, there is a problem with the CSS. When a tab is active it's text color is meant to change to white but it doesn't even though it is in the CSS and it only changes on hover. Please look at this code and tell me what I'm doing wrong!

Here's the HTML:

<div id="FooterTabsWrapper">

<ul class="Tabs">
    <li><a href="#Tab1">MOST POPULAR</a></li>
    <li><a href="#Tab2">MOST COMMENTS</a></li>
    <li><a href="#Tab3">HIGHEST RATED</a></li>

</ul>
<div class="TabWrapper">
    <div id="Tab1" class="TabContent">

    </div>

    <div id="Tab2" class="TabContent">

    </div>

    <div id="Tab3" class="TabContent">

    </div>
</div>

Here's the CSS:

ul.Tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 40px;
width: 100%;
 }

ul.Tabs li {
float: left;
margin: 0;
padding: 0;
height: 40px;
line-height: 40px;
overflow: hidden;
width:100px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

ul.Tabs li a {
text-decoration: none;
color: #444;
display: block;
outline: none;
position: relative;
letter-spacing:-1px;
}

ul.Tabs li a:hover {
background-image:url(../Images/ActiveTab.jpg);
background-repeat:no-repeat;
color:#FFF;
} 

html ul.Tabs li.active, html ul.Tabs li.active a:hover  {
background-image:url(../Images/ActiveTab.jpg);
background-repeat:no-repeat;
color:#FFF;  /* This doesn't do anything! */
}

.TabWrapper {
border-top: none;
clear: both;
float: left; 
width: 100%;
background: #2D2D2D;
}

.TabContent {
padding: 20px;
height:185px;
overflow:auto;
}

And here is the jQuery:

$(document).ready(function() {

//Default Action
$(".TabContent").hide(); //Hide all content
$("ul.Tabs li:first").addClass("active").show(); //Activate first tab
$(".TabContent:first").show(); //Show first tab content

//On Click Event
$("ul.Tabs li").click(function() {
$("ul.Tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".TabContent").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to   identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});

});

Thanks,

DLiKS

Answer 1

This:

ul.Tabs li a {
    /* ... */
    color: #444;
    /* ... */
}

Isn't overwritten by this:

html ul.Tabs li.active, html ul.Tabs li.active a:hover  {
    /* ... */
    color:#FFF;  /* This doesn't do anything! */
}

Therefore the a elements remain as defined by ul.Tabs li a

One solution would be to add this:

ul.Tabs li.active a {
    color: #FFF;
}

---

If found out this using Firebug. By inspecting the css properties of an element (you can do this with every element on the page), it was easy to spot. As you can see, firebug tells that the color attribute of the a element is overwritten as described above (it has a strikethrough):