1

I have a PNG that has transparency in it. IE7, in all it's glory, takes my inline CSS and modifies it to include "background-color: transparent" in it. This is problematic because that CSS line screws up the table color underneath the PNG image.

This is what I tell IE to render:

<td style="white-space: no-wrap; margin: 0; padding: 0; background: url('FOO.PNG') left top repeat-y;"> ... </td>

This is what I get when I use IE's developer tools (F12):

<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-image: url("FOO.PNG"); background-attachment: scroll; background-repeat: repeat-y; background-position-x: left; background-position-y: top; background-color: transparent;"> ... </td>

As you can see, there is some magic happening behind the scenes. I'm assuming that IE7 reads the png file and determines that it has transparency. Once it does that, it specifically adds inline CSS. The culprit being "background-color: transparency". If I disable that in the Developer tools, all works fine.

Has anyone run into this?

MarkP
  • 4,168
  • 10
  • 43
  • 84
  • 1
    Why is this a problem? What display issue are you experiencing? I doubt it has anything to do with the PNG file. You haven't specified a background colour, so the background is transparent. – Michael Mior Jul 08 '11 at 19:01
  • 2
    the default `background-color` IS [`transparent`](http://www.w3.org/TR/CSS2/colors.html#propdef-background-color) (at least that's what the spec tells IE how to implement). – bluefoot Jul 08 '11 at 19:02
  • Yes the default should be that. But if I specify the background-color manually, it gets overwritten with transparent. – MarkP Jul 08 '11 at 19:55
  • Are you specifying the color in the same line as the image, or somewhere else? – Shauna Jul 08 '11 at 20:02
  • In the same line as is added by IE. – MarkP Jul 10 '11 at 14:16

2 Answers2

1

weird - try specifying the background the old fashioned way (i.e. not shorthand)

<td style="padding: 0px;margin: 0px;background-image: url("FOO.PNG");background-repeat: repeat-y; background-position: left top;"> ... </td>

I would expect IE not to add additional inline styles in this case (aside from splitting up the shorthand margin and padding).

Must admit I'm surprised background-color: transparent is causing an issue. Also - why inline styles?

Stuart Burrows
  • 10,824
  • 2
  • 34
  • 33
  • The code wasn't written by me, I inherited it. I'll probably end up changing it, but not in the near future. – MarkP Jul 08 '11 at 19:53
  • Okay cool, where are you specifying the background-color you actually want? if in a css file, or style tag add !important to the declaration. This will overwrite the inline style – Stuart Burrows Jul 08 '11 at 20:56
  • Adding !important to the inline CSS worked. I tried adding this to the master .CSS file I had, but that created new problems and didn't fix the old. It's a bit of a hack, but it's one that I can live with. – MarkP Jul 11 '11 at 15:41
0

This is per the specification.

When you use a shorthand property, any values you don't explicitly specify are reset to their default values.

If you want to get the value that would otherwise be applied through the cascade, don't use the shorthand version of the property (use background-image and background-position and etc.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335