IE 7 not using the most specific CSS rule

I want to style all my th elements the same (white text on black background) apart from a couple of usages where this formatting is not wanted - in which case I add a class of no-headers to the table element.

th {background-color: #000000; color:#FFF;}
table.no-headers th {color:inherit; background-color:inherit ;border:inher开发者_运维知识库it; } 

So here is some example markup if you needed some

<table><tr><th>This has a black bground</th></tr></table>
<table class="no-headers"><tr><th>This inherits bground from parent</th></tr></table>

This works fine in IE 8/9 and FF and Chrome but not in IE 7. IE 7 just will not use the 2nd rule - despite it being more selective.

In fact I have tried all sorts to fix this problem - all to no avail.

I have tried adding the no-headers class on the th element too

th {background-color: #000000; color:#FFF;}
th.no-headers {color:inherit; background-color:inherit ;border:inherit; } 

<table><tr><th class="no-headers">This inherits bground from parent</th></tr></table>

and even that doesn't work - I am left feeling like I am doing something really obviously stupid / wrong - but then again it works fine in other browsers!

Any help greatly appreciated.

IE7 does not recognize the inherit keyword (except on a few obscure properties).

Your best bet is to specify the default colors manually.

According to this SO post: IE7 CSS inheritance does not work IE didn't suport inherit until IE8. So you will have to specify the color, background, and border specifically.

IE7 does not support style inheriting. That was introduced in IE8.

See: IE7 CSS inheritance does not work

This is not a huge problem, since IE8 is a universal upgrade from IE7, unlike IE9, which is only available for Windows NT6 and above.