Internet Explorer 6 has always been the ugly duckling of web design. Not only due to its sometimes somewhat strange rendering, but the lack of native transparent PNG has been a very annoying shortcoming for developers as well. Transparent PNG’s provide the opportunity to really spice up your website graphically. IE6 lacks this support however, resulting in ugly grey backgrounds.

Twinhelix’ IE PNG Fix provides a good work-around for this problem by using the already existing filter technology in IE. You’d ask yourself why Microsoft didn’t implement this technique natively in their browser. This small javascript file adds behavior to certain user defined HTML tags, replacing the PNG image by a transparent version of the image.

Anyone who has used this fix has probably encountered another problem: hyperlinks or mouseovers don’t work if they’re defined within the fixed element – if it’s positioned either absolute or relative. This really is a problem with popups, dropdown menus and other dynamic elements.

What the filter basically does, is adding a transparent image on top of the original div. If the base div is positioned relative or absolute, it is automatically indexed on top of its content. Manually altering the z-index of the inner content doesn’t make much of a difference; often it isn’t what you want either.

A good workaround for this behavior is as follows:

• Add a wrapper element (div) around the base element (with the png as a background image)
• Apply the positioning styles to the wrapper element (position, left and top)
• Position the base element as “static”. Since it will start at the same position as its parent element, it’ll keep in place.
• Leave the background image on the base element.

Since the PNG background image is now applied to a statically positioned element, it isn’t affected by any z-index and inner content will behave as normal!