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

#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.

Make Haste Slowly

Are you tired of all the bullshit business, marketing and technology news out there? Do you have a bad case of FOMO? The signal to noise ratio is entirely out of whack nowadays. All the incentives are misaligned. If you want an unbiased view on on the intersection of technology, marketing, products/services and the impacts on consumers, businesses, and society in general, sign up below.

You have Successfully Subscribed!