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


Tags: html,cross-browser,css

Problem :

I've got a table which has a repeating background image on the header:

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

And this works across in both Firefox and Internet explorer, but if we want certain column headers to show the sorting direction we decorate the th with the class Sorted and the Direction. And use css to to add a 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 the tr is inherited (found out using Internet Explorer Developer Toolbar) to the th. Which means the th paints #D3D2D2 color over the tr background. Firefox, Chrome and IE8 do not have this problem, so it's a IE6/7 bug I suspect. I thought about using a background-color:transparant on the thead th.Sorted but IE6/7 just paints the body background (it looks like it cuts a hole in the other layers between the body and the th).

This is how it should look like:

correct interpretation of the css/html

And this is how it looks like in IE6 and IE7:

IE6 and IE7 wrong rendering

Below is the HTML snipppet 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 could I solve this?



Solution :

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

    CSS Howto..

    How to overlap a CSS background over an tag?

    How can I align divs in a row rather than vertically?

    How to apply custom CSS on Facebook comment box plugin

    How to get and extract matched css rules on dom-node?

    How to format this form using only CSS

    How to remove dot '.' from CSS list-style:decimal [duplicate]

    How to apply a drop shadow on a triangle in CSS?

    How to load CSS using jquery

    how to make a div to wrap two float divs inside?

    How design an unordered list of images horizontally with Bootstrap?

    How to make gradual colour change when hover with CSS?

    How i can match multiple CSS selectors

    How to make navigation follow when scrolled down? [duplicate]

    How can I make this kind of a border?

    How can I change Github markdown background?

    How can one fix a CSS3 graident background when using a box for content?

    Customizing Clockdown.js to Show only Minutes and Seconds

    How to call apk font use CSS in android?

    How to reference embedded images from CSS?

    Css How to override

    [closed]

    How to persist checking the screen width in Javascript

    How can I make editable fields with button?

    How to use image tag in body of html instead of loading image from css?

    toggleClass on the same container and show different content with tabs effect

    How to actually center (vertical and horizontal) text inside a nested div

    How to place several elements in one row when using a list?

    Android, How can I apply CSS into WebView?

    How to make div scroll down with a page once it reaches top of page?

    How to overlay “transformed” element?

    CSS : How to give different spacers within the same navigation menu