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?

5
  • 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. Jul 8, 2011 at 19:01
  • 2
    the default background-color IS transparent (at least that's what the spec tells IE how to implement).
    – bluefoot
    Jul 8, 2011 at 19:02
  • Yes the default should be that. But if I specify the background-color manually, it gets overwritten with transparent.
    – MarkP
    Jul 8, 2011 at 19:55
  • Are you specifying the color in the same line as the image, or somewhere else?
    – Shauna
    Jul 8, 2011 at 20:02
  • In the same line as is added by IE.
    – MarkP
    Jul 10, 2011 at 14:16

2 Answers 2

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?

3
  • 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 8, 2011 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 Jul 8, 2011 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, 2011 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.

1
  • IE overwrites my background-color changes with transparent.
    – MarkP
    Jul 8, 2011 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.