Subtil

A non-javascript fix for PNG in Internet Explorer

Submitted by Åke Johansson on June 11, 2007 - 23:32

Guess a lot of you have run in to the problem of Internet Explorer (pre 7) failing PNG alpha transparency. So did I on a recent project. Everything's fine in Firefox, IE7, Opera etc. but an ugly grey background shows up in IE6 where transparency is expected.

There are plenty of fixes to this problem. Most of them rely on javascript or php. I tried a few but no success since they mostly seem to target inline images, my problem concerned an image placed as a background-image with CSS.

I finally stumbled across Christopher Schmitt's PNG Image Replacement Technique that combines the Fahrner Image Replacement technique (FIR) with Microsoft's filter property in order to activate the alpha transparency.

What I like about this solution is that it involves no javascript, no extra php hacks or extra gifs. It's pure CSS and handles only background-images but then that was just what I needed.

Åke Johansson's blog

We help companies and public authorities build better web sites through better information management. Focusing on web standards and accessibility Subtil assists in designing usable and efficient web sites that are accessible to all in accordance with WAI and local guidelines.

To get your web site to run effectively you need more than good information management. Web Governance deals with the content as well as the people, making roles and responsibilities clear, developing standards and policies for an effective web site process.

(Subtle) stems from the Latin word subtilis.

Subtilis -e [finely woven , slender, fine]; of senses, etc. [plain, simple, unadorned]. Hence partic. subtiliter, [by fine links or passages]; of judgment, [with discrimination]; of style, [plainly, simply].