CSS fix for PNG (IE6)
13/06/2010 § 2 Comments
PNG (Portable Network Graphics) format fro images is not well supported in IE6 as you know. To fix this issue, you can use some nasty JS, that will break the progressive enhancement of your page (but it will keep your CSS valid) or you can use some CSS that will use “filter” property and some expression. This will make your page not pass the W3C Validation for CSS, as expressions are not allowed, but I still prefer this solution on the JS one, even because this fix is related to presentation layer (CSS) and not the behaviour layer (JS).
Waiting that IE6 will be no longer supported, you can grab here the fix to support PNG in IE6.
In the following example, we need to support a .png image as background for a class “png-back”:
.png-back {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src=/img/file.png', sizingMethod='scale');
}
This code will do the job and it’ll make your png image work perfectly as background for “png-back” class.
You can add this code to a specific IE6 stylesheet (e.g. ie6.css) and refer to it into your HTML through a conditional statements:
<!--[if lte IE 6]-->
<link type="text/css" rel="stylesheet" href="/img/ie6.css" />
<!--[end if]-->
<!–[if lte IE 6]–> stands for “if your IE browser version is less or equal than 6″.
By the way, conditional expressions should be avoided, but often we need to use to support IE6 leaks. So the best solution will be…DO NOT USE IE6!
Enjoy!
Hi Seb,
How about Chrome Frame? A little more drastic perhaps, but can totally enhance the intertubes experience on IE..
Rob
Hi Rob,
I’m personally not a fan of Chrome Frame, just because it’s something that the user needs to install, and usually in environments where you can’t upgrade IE I believe you can’t install any plugins…but yeah it’s a good “illusion”. I honestly prefer degrading the page for IE, rather than using Chrome Frame. Have you tried Chrome Frame out?
Seb