CODEWITHSUNDEEP
htmlcssinternet-explorer-8ie-developer-tools
Murphy1976
Murphy1976

Reputation: 1475

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

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?

Upvotes: 2

Views: 4514

Answers (3)

Graphic Equaliser
Graphic Equaliser

Reputation: 196

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

Upvotes: 0

jessegavin
jessegavin

Reputation: 75660

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

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

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.

Upvotes: 1

Related Questions