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..

    Internet Explorer 10 menu item shows focus outline unexpectedly

    How to put two divs on the same line with CSS in simple_form in rails?

    How can I add CSS and JS in Symfony2?

    How to center this element in css

    How to get rid of the spaces between CSS nav element borders?

    How to use scaleable pixels in css

    How to align items in second (and further) column, so that the changing value (increasing characters) do not push

    How to resize div size proportional with browser size?

    How to get names of css classes of an element

    How to center a group of images in HTML/CSS?

    How to target CSS link with JavaScript

    Can't show Combobox in table

    How to override a css !important property using jQuery with transitions

    how to arrange 2 images side by side in mobile view?

    How to get these timestamps, which come after in the html, to float right on the same line

    Django - how to collapse forms like in the django admin

    How to programmatically apply CSS definitions to the whole page?

    How to scale the image size in a sprite

    How do I avoid multiple jquery dropdown boxes interfering with eachother

    How to center social buttons in bootstrap login page?

    How can I show an attribute as text with CSS?

    How to show/hide big image by clicking on thumbnails?

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    How to wrap an image in a div, and then center the div

    WordPress admin stylesheet not showing images

    How to add a mobile optimised external CSS to a Shopify site

    CSS horizontal scroller, how to position “below” before “right”?

    How to select this td element?

    How can I align an image to the center in a Bootstrap column?

    jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element