Transparent PNGs in IE6

Everybody knows that IE versions 5.5 and 6 cannot render a PNG image with alpha transparency correctly. The result is a visible “box” around the image highlighting what is supposed to be the transparent part. In the past I had used the “IE7″ JavaScript that i had found on the web before IE7 was actually released. It involved including a JavaScript file in the header of your page that was responsible for post-processing all PNGs on the page just after page load using Microsoft’s proprietary IE filter: AlphaImageLoader. While that method works fine if you have a webpage or website with many PNG images, I thought I’d share a quicker way to do it inline, should you ever have the need to deal with just a single PNG. This quick little piece of code will write PNGs into your webpage in such a way that Internet Explorer below version 7 will “draw” the image properly with full alpha transparency.

In order to do this we will actually write the image into the page twice – once for IE6 and below, and again for all the other browsers. Here we go…

1 – create a 1 pixel by 1 pixel transparent GIF image and drop that in your images directory (i usually name it “spacer.gif”).

2 – here’s the XHTML to put in the <body> of your document…

<img id="theimage" src="myimage.png" alt="" />

* notice how we write the image the first time using Microsoft’s Alpha Image Loader – and how this is wrapped inside IE conditional comments which basically say “if the browser is IE version less than 7″ – then we write the image again the “normal” way for all other browsers.

3 – here’s the CSS to put in the <head> of your document or external stylesheet…

#theimage, #ie6image { width: 100px; height: 100px; border: 0px; }

* html #theimage { display: none; }

* the second style above is the popular * html CSS hack that only IE version 6 or lower will read – telling those browsers to not display the second image.

And there you have it – a relatively simple way to solve the problem of alpha transparency in older versions of Internet Explorer. The best part about this approach is that it uses no JavaScript – just standards-compliant XHTML and CSS.

November 23, 2007 | Filed Under Browsers, CSS, XHTML