How to Fix Internet Explorer + iFrame + PNG Transparency Issue

Working on a client site, we ran into issues with Internet Explorer, iFrames, and transparent PNGs. For the site, we are using an iFrame to load content when the user clicks on a button. On the fly, with javascript, a bit of code gets generated like:

Blah, Blah, Blah

1
2
3
4
5
6
7

#bazImage {
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 25px 30px 0px 18px;
    font-family: Arial, Helvetica, sans-serif;
    background: url(images/bazImage.png) no-repeat;width: 256px;height: 107px;}

The background image is bazImage.png, a transparent PNG. This worked fine in Chrome, Firefox, and Safari, but all the transparent pixels turned up as white in IE. My first thought was we needed to apply a PNG fix.

But that didn’t help.

Not so surprisingly, Internet Explorer handles transparency differently than other browsers. Elements have an allowTransparency attribute that defaults to false, so embedded iFrames won’t be transparent. Simply set it to true.

One final step, set ‘background-color: transparent;’ in the body element.