Dynamic CSS is not working in IE6 and IE7

Question

I have created a page with 4 widgets each having a table with in it. User can click on the header of the widget to select it. On doing so, the widget will get a class "widgetSelected" and the selected column of table in it, will have a light blue color. If someother widget is selected, the "widgetSelected" class will get removed from this widget. Following is the CSS of that:

.widgetTable .wt_r td {
  border-bottom:1px solid #EAEAEA;
  overflow:hidden;
  white-space:nowrap;
}

.widgetSelected .widgetTable tbody .wt_sc {
  background-color:#CFE2EC;
}

where:
widgetSelected: class of the selected widget
widgetTable: class of the tables in the widgets
wt_r: class of table rows in the tables
wt_sc: class of 'td's in the selected column in the table.

This works prefectly fine in Firefox but not in IE6 and IE7.

1. in case of IE7: the cells in the selected column of the selected widget will get the light blue color if you roll over them. Seems like that IE7 only applies the background color on hovering or clicking on the row.
2. in case of IE6: IE6 doesnot even respond to hover effect as IE7 does. I opened firebug lite on IE6 (http://getfirebug.com/lite) and I can see that the cells of the selectedcolumn in the selected widget has background color set in their CSS but not showing in the page.

Any idea how to handle this situation?

Answer 1

Incidentally, have you experimented with seeing if an attribute other than background-color produces the desired result? Border or something similar?

I'd also try to be less specific with your rule...maybe by removing the TBODY or possibly even the entire nesting structure and just go straight for the class.

Again: just debugging ideas.