Transparent PNGs and IE6 standalone

I’m one of many that have installed IE6 standalone and it really is a great solution to running both IE6 and IE7 on the same computer. Frequently people claim that IE6 standalone and the real IE6 render things differently but I’ve never seen that happen. Until now.

Why an alpha transparent image?

I’m working on a site with several alpha-transparent areas, where authors should be able to switch images and an semi-transparent box should cover half of that image. The users are not skilled enough with image programs to be able to add the transparent part to the image, and adding it to the image would prevent it from expanding when the containing text was zoomed. So I decided to use CSS together with alpha transparent PNGs to solve it. Let’s get to business.

Alpha transparency on modern browsers

Fireworks, my favourite image editor, allowed me to set the opacity to 60%. It smoothly exported my image to PNG and I positioned everything where it should be. Two background images later, one that the author could specify (added with a style tag in the head, not with inline styles), and one with the transparency. Everything worked flawlessly in Firefox, Opera, and IE7, as expected. Easy!

IE6 and AlphaImageLoader

IE6 does not support PNG images like that, so I decided to use what I always use to fix that, the AlphaImageLoader Filter. Note that the fix doesn’t make the background specified with CSS work, it adds a new element to the page, on top of the element you apply it to. It’s also proprietary, meaning it won’t validate, so make sure add it to the page by using conditional comments.

One thing you need to know to use the filter is how the sizingMethod property works:

crop – Clips the image to fit the dimensions of the object.
image – Default. Enlarges or reduces the border of the object to fit the dimensions of the image.
scale – Stretches or shrinks the image to fill the borders of the object.

So there is no way to repeat an image as we’re used to from CSS. Luckily, since I wanted a solid semi-transparent background repeating and scaling is the same, so I just did:


#breadcrumbs {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src="semi_transparent.png", sizingMethod="scale");
}

Making links work in IE6

You could think that we’ve hacked enough to get things up to speed with IE6, but no. Links on top of images loaded with filter does not work. The text of them are selectable, but you can’t click them. Fortunately Ingo Chao fixed this in 2005 (some people are WAY ahead) by simply adding an inner wrapper with hasLayout enabled. Thanks Ingo!

Everything set, and tested in Firefox, Opera, IE7 and IE6 standalone. Phew!

Differences between IE6 standalone and IE6

After deploying the design on the client’s server I quickly got a bug report back: “The breadcrumbs have a grey background, not a transparent one”. I double checked the client’s browser version to be IE6, and tested again locally on my own computer: it worked for me but not for the client. Confused I started looking for another computer with IE6 on (something that was surprisingly hard) I found one at the reception. Gotcha, the PNG was broken there too. I confirmed that IE7 was not installed and downgraded my own to IE6 again. Let’s get to work!

After much fiddling with CSS I moved over to Fireworks again. It has three different versions of PNGs you can export as: PNG-8, PNG-24, and PNG32. I tried switching from PNG-24 to PNG-8 and *blam* it worked!

I’m not sure why this works, but after reading the comments on the Multiple IE page, I have a guess. To get filters to work in IE6 standalone two files are added to the IE6 folder. The authors picked them from an updated version of IE6; could it be that Microsoft updated the filters somewhere between my downgraded version and the latest IE6? After Googling I found an update to IE6 called SP1 which changes the behaviour of alphaimageloader. Quite likely, and very tricky to find.

Anyway, I hope this long story taught you something, I sure did it for me: Next time I’ll use Iepngfix.htc instead :)

13 responses to “Transparent PNGs and IE6 standalone

  1. IE has always supported transparency on png-8 and it makes no difference if is installed as a standalone version or not.

    I use a variation of bgsleight to manage png-24 , it seems to work with IE standalone, and has the advantage of supporting background-repeat.

  2. I decided to use the Virtual PC Console instead of a standalone IE6, there is even a new updated version of VPC out now. And the latest Win XP SP2 iso is legit until aug 07. Works like a charm. Try it out!

  3. @Jonas Hallgren: I wouldn’t say this minor difference is a reason to go through the hazzle of starting up a virtual machine. I’d rather run it like I run Opera and Firefox on the side.

  4. Hi Emil,

    I was just struggling with transparent PNGs and IE6 stand alone last night. A wasted hour later, I came to the same conclusion as you! I tried the iepngfix.htc and I believe that also did not work in the IE6 standalone, though I may be wrong. In the end, I ended up dragging out an old laptop to use IE6 to solve the problem. Good article!

  5. Emil, I love that you love Fireworks. You should do a write up on FW’s advantages over the other image editors in the market today. No one seems to believe me when I praise its powerful capabilities.

  6. We had a hell of a time trying to get transparency to work on our last major project, Oolong Tees.

  7. @Jonas Hallgren: What about doing a writeup on the differences between them yourself? I can publish it here if you want?

    @Adam Rissner: Yeah, another computer is always an option, it’s just that you can’t have one computer per browser…

    @Smarmy: I’d love too. Don’t be supriced if I do…

    @George Morris: A little too promotional, removed url, sorry. What technique did you use?

  8. How familiar this problem. I use PNG in my website and really like the effects. But testing in IE6 gave the problems you describe in this subject. Since fixes are not always valid, I made a separate CSS file for IE 5.5 till IE 6.0 without the PNG effects.

    I hope IE 6 (in March 2007 still 38,7% of all used browsers) will update IE 7 (in March 2007 18% of all browsers) very soon or use another kind browser like Firefox (in March 2007 31,8% of all used browsers).

    Source statistics:
    w3schools.com/browsers/browsers_stats.asp

  9. I believe that IE6 standalone, on the same PC as IE7, thinks that it is IE7 as far as conditional comments are concerned. So conditional comments targetting IE6 are ignored.

  10. @Stu: Hi Stu, nice to see some celebrities here on my little blog :)

    The IE6 Standalone version I’m using (linked to in the first paragraph) has the conditional comments problem solved. I’ve confirmed that it works.

    The only two things that annoy me about IE6 standalone right now is the problem above and that you don’t get any print previews from it. Other than that it’s a great tool.

  11. I saw that at the bottom of the Multiple IE Page that he added AlphaImageLoader a little ways back…

    “Updated on 07/11/2006: (IE6) fixed cookies/sessions support+ AlphaImageLoader support”

Comments are closed.