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.
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:
And here is it in Internet Explorer 6:
Useful eh? It works equally well on a white background.