Question

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:inherit; } 

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.

Answer 1

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

Your best bet is to specify the default colors manually.