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:
And here is it in Internet Explorer 6:
Useful eh? It works equally well on a white background.
Related posts:
[...] to write here Michael! Regarding PNGs and IE6, is that the only reason you are not supporting IE6? PNG8's contain alpha transparency support via some image editors, e.g. Fireworks, which IE6 displays without any need for PNG fixes. [...]
There’s also a rake of js libraries that will fix it. pngFix.js is one…
Yes I know, but this removes the need for a JavaScript fix, one less http call and of course if the person has turned JavaScript off (for reasons best known to themselves).
People who turn Javascript off are going to hell to burn in the fires of damnation for eternity!!!
But I know what you mean. Good point well made. Anything to reduce http calls are good. Just like CSS Sprites. I love a good sprite I do!!!
True!
I too love CSS Sprites, my tiny website makes good use of them.
[...] [...]
[...] I completely agree with you regarding PNG-8, I wrote a blog post about PNG-8 back in September. I've used DD_belatedPNG on a large scale .NET project (main customer uses IE6) [...]