Question

Good afternoon Stackoverflow gurus,

I wish I could show you the exact code for this issue, but I work in a secure area. I can show you an example.

Here’s my CSS

table tr.header{
background: url('image.jpg') 0 0 repeat-x !important;
}

table td{
background: none !important;
color: #FFF !important;
}

td.special{
background:url('image2.png'); 0 0 no-repeat transparent !important;
color: #FFF !important;
}

The reason for all the importants is that I’m attempting to overwrite a systems god awful bland CSS; simple colors, narrow heights and no pizzazz whatsoever.

Here’s my generic HTML

<table width="100%" cellspacing="0" cellpadding="0" border="0">
   <tbody>
      <tr class="header">
         <td>HEADER TITLE</td>
         <td class="special"></td>
      <tr>
         <td>TABLE CONTENT</td>
      </tr>
   </tbody>
</table>

I apologize for the <tbody> tags, but the system automatically puts <tbody> tags in every table.

The problem I’m running into is only in IE8, I have a set image for the table row class “Header” and the all Table Data to show as NO background, but IE8 like to fill the TABLE DATA with white. I can see the background image of the table row if I go into Developer tools and turn off the CSS for the table data, but there shouldn’t be anything in there anyways…

How can I force the table data (except for the one labeled “special”) to be 100% clear and transparent in IE8?

Answer 1

How can I force the table data (except for the one labeled “special”)
to be 100% clear and transparent in IE8?

Put the following code in an external stylesheet named ie8.css.

table,
table td {
  background: transparent;
}

table td.special {
  background: url('image2.png'); 0 0 no-repeat transparent;
  color: #FFF;
}

Then add this code to your page.

<!--[if IE 8]><link rel="stylesheet" href="ie8.css" /><![endif]-->