How to avoid th element from inheriting properties from tr element in IE6 / 7
I have a table that has a repeating background image in the header:
thead tr
{
border-collapse:collapse;
background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}
And this works in both Firefox and Internet Explorer, but if we want the column headings to reflect the sort direction, we decorate th with the Sorted and Direction class. And use css to add direction icon.
thead th.Sorted
{
background-repeat: no-repeat;
background-position: center left;
padding-left: 0.6em;
}
thead th.Sorted.Ascending
{
background-image: url(images/background-table-sorted-column-ascending.gif);
}
thead th.Sorted.Descending
{
background-image: url(images/background-table-sorted-column-descending.gif);
}
The problem is that in Internet Explorer 6 and 7, the background color from tr is inherited (detected by the Internet Explorer Developer Toolbar) to th. This means that th paints a color #D3D2D2
against the tr background. Firefox, Chrome and IE8 don't have this problem, so I suspect IE6 / 7. I thought about using background-color:transparant
on thead th.Sorted
, but IE6 / 7 just draws the background of the body (it looks like it cuts a hole in the other layers between body and th).
This is how it should look:
correct interpretation of css / html http://i42.tinypic.com/wjg8q1.png
And this is how it looks in IE6 and IE7:
IE6 and IE7 rendering incorrect http://i40.tinypic.com/2i7692c.jpg
Below is the HTML snippet I created for this question.
<table cellspacing='0'>
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
<th class="Sorted Ascending">Third column</th>
<th>Fourth column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
How can I solve this?
a source to share
IE seems to have a bug - it displays the background image tr
as the cell background image, so the cell image overrides the row image. The same error exists for an element thead
, but it seems to work well with a table element.
This way you can apply a background image to the table instead of the header row:
table
{
background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}
Since the background image is in the table, it can extend beyond the header row, so you can also set the background color tbody
or its tr
s:
tbody
{
background-color: #fff;
}
a source to share
It's weird ... because it works just fine (although I'm not using images, should it be the same as not?
<html>
<head>
<style type="text/css">
thead tr{
background-color:#000;
color: #fff;
}
th.sorted.Ascending{
background-color:#fff;
color: #000;
}
th.sorted.Descending{
background-color:#AAA;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
<th class="Sorted Ascending">Third column</th>
<th>Fourth column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</body>
</html>
// Edit // You might want to do this:
background: #FFFFFF url(http://www.tizag.com/pics/cssT/smallPic.jpg) no-repeat scroll 0 0;
a source to share
Seems like a bug in IE. I tried it without a background image for the cell:
thead tr
{
border-collapse:collapse;
background-image:url(http://www.freefoto.com/images/1223/09/1223_09_1---Big-Blue-Sky--Montana--USA_web.jpg);
background-color:gray;
}
thead th.Sorted
{
background-repeat: no-repeat;
background-position: center left; /** this line changes the position! */
padding-left: 0.6em;
}
and the background image will be moved to that cell! I think IE displays the background row one cell at a time.
You may need to add another item to the cell.
Ok, one more idea:
It seems to work fine if you put a background image on the element table
. thead
is also a bug. you can try including both (table and tr) by adding a rule:
table
{
background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}
a source to share