IE6/7 CSS Class Overriding

I have a css file like:

#SomeTable.hideAll td { display: none; }
#SomeTable.showXYZ .show { display: block }

When I add the class show to a td, the display overrides to block in chrome, FF, and IE8. But in IE6/7, the display stays none like it is not being overridden. Is there something odd you have to do in old IE's to do a css override like this? I suspect it has something to do with it either not being possible, or I just don't understand rules for determining an override.

EDIT: even if the css rules look like

.hide { display: none; }
#S开发者_StackOverflow中文版omeTable.showXYZ td { display: block }

The css still does not get updated. This can't be a specificity thing, but must be an IE6/7 bug.

Have you tried this yet? — 

#SomeTable.hideAll td { display: none; }
#SomeTable.showXYZ td.show { display: block; }

The <td> element and other table-related elements should not be set to display:block or display:inline. They have their own specific table-relevant display types, which should be used instead.

eg:

table.mytable {dislpay:table;}
td.mycell {display:table-cell;}

In some browsers, display:block; may also work, but this is not correct, and will definitely cause problems in other browsers. The above display types are the correct ones.

However there are some inconsistencies in support for these display types between different browsers, notably older versions of IE.

The best option, which will be compatible for all browsers, is simply to specify nothing where you want it to be shown -- ie

#SomeTable.hideAll .hide { display: none; }
#SomeTable.showXYZ .show {  } /* nothing here */

Doing this, when you specify the class as show, it will pick up the default display type for the element type. This works even if you switch between hide and show and back again.