Question

I notice that sometimes when I try to override a CSS rule, browser does not apply it, but Firebug shows that it should be applied (default property crossed, overriding value shown as valid).

Here’s an example:

table th
{
background:red;
color:#333;
} 

and then for a specific case I tried to override these:

table.my_domain th
{
background:blue;
color:yellow;
}

Now, thing is that background color is actually changed to blue, but color stays #333. When I check in Firebug both red background and #333 color are crossed and blue background and yellow color are valid (not crossed). But browser just ignores the color property overriding…I tried it on Firefox, Safari and Chrome…the newest versions.

There are no other CSS rules which could interfere, so I’m a little bit perplexed.

What am I missing?

Tnx

Answer 1

Well, I figured it out. Maybe it will be useful for somebody else. The answer is that Firebug omitted one rule just as I did. I had a color declared for a link inside th – th a { color:#222; } and since in a table priority is given to the lowest element it just applied it. But Firebug did not show this at all. And since two colors are similar, #333 and #222, I did not see it before. Firebug is good tool, but as I can tell, not perfect.