PNG8 – more transparent than you think!

At work the other day I was running into an issue regarding rounded corners with shadows. I had the divs and background images all working fine, it all looked good.

Except in Internet Explorer 6.

Now I know that there are many people out there who believe that IE6, as it’s affectionately known, is the spawn of the devil and should be flung to the depth of hell, never to be seen again. Heck there’s even a campaign afoot to get rid of it. And perhaps they have a point. But IE6 is still used by some people, and therefore must be supported.

Anyway, back to my initial problem, you remember, the shadowed rounded corners. The images themselves were in PNG24 as I find PNG to be the best image format for displaying transparency. It’s a well known fact in the web design world that IE6 doesn’t support transparency, do you just get a big grey box over the transparent PNG image. You can apply JavaScript fixes to get it to work, and it generally works well. But with this design I had, it didn’t. I tried a number of PNG fixes, and they all caused the images to move and therefore ruined the design. Some of the areas then also became unclickable.

Now this is probably my fault with the design. I can accept that. But I didn’t want to have to mess about with it too much just because of IE6. So I trawled Google and eventually found PNG8 – The Clear Winner by Alex Walker. Please read the article, but it mainly points out that PNG8 is much more useful than we might have thought, but only if saved in a Adobe Fireworks (he does mention some other image editors that also support this) and with Alpha Transparency selected for the image.

So I gave all this a go (thankfully we had a copy of Fireworks at work) and lo and behold it worked! Ok, the shadow with its transparency has disappeared, bit instead of adding a crap white line around the edge, IE6 just ignores the shadow and displays the rest of the image.

Here it is in Internet Explorer 7:

ie7 rounded corner example

And here is it in Internet Explorer 6:

ie6 rounded corner example

Useful eh? It works equally well on a white background.