CSS -> IE8 filling in background:none child with WHITE

Question

CSS -> IE8 filling in background:none child with WHITE

4.5k Views Asked by Murphy1976 At 03 April 2025 at 18:08

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?

Original Q&A

There are 3 best solutions below

Diodeus - James MacFarlane On 11 January 2012 at 22:10

background-color:transparent should work, but it doesn't dig through elements that are under it. If an element under it has a colour, you'll see that colour.

Graphic Equaliser On 12 April 2012 at 15:42

Try putting :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

at the top of the document (before the <HTML> tag). It fixed this problem for me (and moved a load of stuff round too! I hate IE8!).

**jessegavin** · Accepted Answer

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

CSS -> IE8 filling in background:none child with WHITE

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in INTERNET-EXPLORER-8

Related Questions in IE-DEVELOPER-TOOLS

Trending Questions

Popular # Hahtags

Popular Questions