Question

I have some CSS like so:

table.varTabs th
{
    border-collapse: collapse;
    border-bottom: #637356 2px solid;   
}

table.varTabs th.active
{
    border-collapse: collapse;
    border-bottom: #637356 0px solid;
}

This is used in my table to show and hide borders under my th (which are tabs at the top of the table). So in Firefox, it works correctly that when active is in the class, the bottom border that it gets from the base css, gets removed. But my Chrome version isn’t happening that way.

How do I use CSS to select the table.varTabs th that don’t have active in the class? (I want a CSS approach and not JQuery or adding a unactive class in the HTML).

In Chrome (not correct): http://screencast.com/t/sqJfWS6S
In Firefox (correct): http://screencast.com/t/kXPHPV6Hyao

See the line under use variables.

Answer 1

Since there is a Chrome bug somehow, I did this and it worked:

table.varTabs th
{
    border-collapse: collapse;
    border-bottom: #637356 2px solid;   
}

table.varTabs th.active
{
    border-collapse: collapse;
    border-bottom: #fff 2px solid;
}

Created a white border to overwrite the other one on a white background.