If there is one thing more frustrating than Internet Exporer’s CSS quirks, it’s the way the ubiquitous browser handles PNGs. The image format, short for “Portable Network Graphics”, has a combination of features that make it an ideal web format for images, yet the handling of the format by IE has made it difficult to deal with for many developers.

Benefits of the Format

PNG has a few different versions which allow it to replace both JPEG and GIF images in nearly all situations on the web. The PNG-8 format uses 8 bits per pixel, and has an indexed color pallet, much like GIF. You can get extremely small PNG images this way if the color pallet is small enough, and for many images in templates around the web, PNG-8 is more than adequate.

For those situations where you need full color, you can instead use the PNG-24 format, which has the same color range as JPEG. Unlike JPEG however, PNG-24 will not artifact your image, and will still keep the image relatively small in size.

The real benefit of PNG however comes in the PNG-32 format, which is full-color like JPEG but offers something call “alpha transparency”. GIFs can be transparent, but the transparency is an all or nothing affair. A pixel is either entirely transparent, or not transparent at all. Alpha transparency however uses 255 “levels of transparency”, allowing every pixel to be partially transparent, letting you create a full-color image which blends seamlessly with any background you place behind it.

Unfortunately, IE has always had trouble implementing alpha transparency in PNG. IE6 just doesn’t support it, and developers have had to rely on Javascript and CSS hacks to modify the browser to support the format. IE 7 introduced support for PNG-32, however as any developer should be used to, it came with quirks.

Supporting Alpha Transparency in IE6

A wealth of solutions exist to help IE6 support PNG-32, and instead of elaborating, we’ll simply be linking to some solutions.

TwinHelix has a fix which tackles both the issue of PNG transparency and the background issues that arise from fixing it. The problem is that in fixing IE’s anomalous behaviour with PNGs, IE no longer allows you the use the background-position: or background-repeat: CSS properties with PNG images. Both the PNG transparency issue, and the resulting positioning issues are tackled in this fix.

DillerDesign offers another fix for your PNG woes, and while this one is slightly better documented, it does not appear to handle the resulting background image issues.

Quirks of IE Support

As with nearly any IE specific problem, PNG support in IE has additional quirks that developers need to be aware of. In all versions of IE, including IE7 and IE8, no matter what PNG fix you have installed on your site, altering the CSS opacity property on an element which uses a PNG with alpha transparency will completely break this transparency. There is no work around for this problem other than to not change or set the opacity of any elements which use PNGs in IE.

We ran into this problem with the tooltips we use for our portfolio and navigation, as our jQuery altered and set the transparency of our items as part of the animations. The solution was to create a separate animation just for IE which doe not change the opacity at all. Curiously, even if you only set the opacity of the element to 1.0 (full opacity) and never change it, IE completely breaks support for alpha transparency.

When dealing with IE, you must be careful what CSS properties you set and where.

While dealing with IE’s quirks is a headache, the browser still represents a large portion of the internet. It’s important for developers to understand the limitations that Microsoft creates for their websites, and to design around them.