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”:
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" />
<!–[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!