How to fix PNG's under IE6 (Internet Explorer CSS PNG hack)
IE6 just won't die, so we as web developers have to keep supporting it - at least in some capacity. My perspective (both personally and professionally) is that it should be supported to *some* extent. Provided the site looks okay and content is accessible I'm happy. However, in my professional life it's pretty likely that the client is using IE6 so we still have to make a proper effort to get sites rendering correctly. Variable transparency PNG's are one such thorn in my side, but with this super-short tutorial I'll show you how to quickly (and easily) get PNG's to display correctly using a little bit of CSS trickery.
The Problem
When you just place a PNG with variable transparency on to the page, IE6 will firmly remind you who is boss. The outcome looks something like this:
Any pixel that requires transparency is rendered as a grey mess. So in IE6 you need to:
- Add a wrapper around the image with the exact dimensions of the image (and any positioning applied to it)
- Add a class of "ie-hide" to the image
Which will look something like this:
You now need some CSS to accompany this:
You'll then find that this option works under IE6. The underscore is there because only IE6 will read it, meaning you can target specific rules to this problematic browser.
If you're having problems with links that are applied to regions using the CSS PNG hack, visit my tutorial how how to fix IE6 PNG hack links not being clickable.
