ansaurus

Question

How to avoid a th element from inheriting properties from a tr element in IE6/7

Answer 1

+1 A:

That is odd... because this works just fine (though I am not using images, it should be the same no?

<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 instead:

background: #FFFFFF url(http://www.tizag.com/pics/cssT/smallPic.jpg) no-repeat scroll 0 0;

SeanJA 2009-05-07 11:30:35

Thanks for your answer, but this is not the problem I have, the problem is that I don't want to have a new background color for the th's I just want to have a small icon on the left side and just be transparent. Because the tr beneath it already has a background image repeated.

Davy Landman 2009-05-07 11:32:47

Answer 2

+1 A:

It looks like a bug in IE. I tried it without 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 backround image is repositioned on that cell! I guess IE renders the row's background one cell at a time.
You'd may have to add another element in the cell for that.

Ok, Another idea:
It seems to be working ok if you put the background image on the table element. thead is also buggy. you can try including them both (table and tr), by adding the rule:

table
{
   background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}

Kobi 2009-05-07 11:36:14

Yes, IE and FF both draw the background per cell (set cellpadding to 5 and you'll see) but in your the problem remains, why does th inherits the tr background-image ? You're proposing a extra element in side of the th just to be able to set the background on that? I hope to avoid those kind of solutions, but I'll try it..

Davy Landman 2009-05-07 11:50:48

I know, my code doesn't solve this. It's a sample of the bug(?). The cell's parent's background image is moved, even though the cell has no image.

Kobi 2009-05-07 12:06:56

You're right I just wanted to make clear the the fact that it does render per cell is not the problem, but when deciding what to render for the cell it uses the wrong logic. And your sample indeed showed another way to reproduce this bug.

Davy Landman 2009-05-07 12:15:06

You're solution with the table background indeed works and is much cleaner than adding a extra component. I would suggest splitting that answer to a separate answer and explain how it works and that the tbody tr should probably have a background-color: #fff;. So create a nice answer out of your suggestion so google users could find it, and I'll accept it as a answer.

Davy Landman 2009-05-07 13:35:46

Answer 3

+2 A:

It seems IE has a bug - it renders the tr's background image as the cell's background image, so the cell's image overrides the row's image. The same bug exists for the thead element, but it seems to work well with the table element.
So, you can apply your background image to the table instead of the header row:

table
{
   background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}

Because the background image is on the table it may extend beyond the header row, so you may also want to set the background color of the tbody or its trs:

tbody
{
   background-color: #fff;
}

Kobi 2009-05-07 13:50:37

ansaurus

tags:

views:

answers:

How to avoid a th element from inheriting properties from a tr element in IE6/7

related questions