Forcing Transparent .PNG’s to Work in IE
Posted at 5:10pm on Sun. July 8, 2007
As most developers are aware, the lack of standards support in Internet Explorer for Windows has caused a lot of problems over the years. Even if every other browser on the market supports a given standard, chances are, developers still can’t take advantage of that standard because IE doesn’t support it and IE is what the majority of the population is using to surf the web. Now that IE7 is starting to pick up steam, things are looking a lot better for developers, but the damage has already been done. We’re going to be hacking older versions of IE to properly display our pages for a long time to come.
One of the most useful standards that Microsoft has chosen not to support (until recently, with version 7) is transparent .PNG’s. A transparent .PNG image works in much the same way that a transparent .GIF image does, but .PNG has the advantage of offering true alpha transparency, which means you can have pixels that are partially see-through, rather than having pixels that are ONLY either fully opaque or fully transparent. Used creatively, alpha transparency can yield some pretty darn impressive-looking effects, yet it is rarely used on the web because - even though virtually every other browser supports it - it don’t work at all in Internet Explorer. The bottom line is: the web would be a much prettier place if transparent .PNG’s could just somehow be made to work in those pesky older versions of IE.
A while back, a friend mentioned to me that he was able to force IE to properly display transparent .PNG’s through the use of HTML Components, or, .htc files. At first I didn’t quite grasp how this was possible and unfortunately, knowing that he was capable of writing mind-bogglingly complex code, I dismissed it as an overly-complicated, if not downright impractical hack. Well, it turns out it isn’t as complicated as I had imagined, because the other day, I stumbled upon this and got transparent .PNG’s up and running in IE versions 5.5 and 6 for Windows in under 5 minutes. It sounds almost too good to be true, but by feeding Internet Explorer one of these magic .htc files through a single extra property in your CSS, transparent .PNG’s just work.
Before you get too excited:
- This only works in IE for Windows versions 5.5 and 6.
If you need to support IE 5 (or heaven forbid, any versions before that), you’re still out of luck. Thankfully, that isn’t too big a deal for most projects these days, but it’s important to know. - This will not work for IE 5 for Mac.
However, since IE 5 for Mac is an entirely different type of animal, IE 5 for Mac has been supporting transparent .PNG’s for years (although only on<img>elements and not CSS background images). Again, this might not concern you if you don’t plan to support IE 5 for Mac, but there you have it. - This WILL invalidate your CSS.
That would be a huge downside, but thankfully, you can apply the proprietary behaviour property in a separate style sheet through conditional comments, so the only browsers that will ever be served the invalid CSS will be the offending IE 5.5 and 6. Nice and clean.
So the way I use this is as follows: I upload this magic .htc file to my host (you’ll also need this blank .GIF file if you intend to use transparent .PNG foreground images). Then, I create an IE-only style sheet called IElt7.css (IE less than version 7) in which I apply the behavior: url("iepngfix.htc"); line to whichever element I am applying the transparent image to. Link to the the new style sheet in your html file through a conditional comment in your <head> section and bam! You’ve got transparent .PNG’s in IE. Life is sweet.
Have fun, and if you need any help, remember that there’s an official support forum on the Twin Helix site.
Special tip for my fellow Canadians: when writing your CSS, don’t forget to spell “behavior” without the “u”, eh? :)
Update, Sept.19, 2007: It’s been brought to my attention (okay, I learned this the hard way) that this fix does NOT work on repeated or tiled background images. You can usually get around this by simply using pre-repeated (that is to say, larger) background images, but this limitation can be a real kick in the pants if you finish a whole design that makes judicious use of repeated images before you find out about it (ow, my pants!).
