Templatix Blog

If you ever had to use GIFs and you know just how jaggedy that transparency around the edges is, the PNG format, with it’s smooth transparency levels, is purely God-send. it’s just that IE (5,6,7) is, as usual, so stupid, that it doesn’t know what to do with the transparent areas and simply puts them over an abnoxious opaque gray rectangle. If you really must have PNG transparency into IE, you must use a dedicated filter (yet another M$ abomination), which filter in turn is able to display a transparent PNG as a background image, like so:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=img/png-file.png);

The most commonly used solution for the geek ones os to implement a javascript programmed to parse the whole shazan, to look for PNG references and, with a global replace, to turn those into filter areas. Since this is a javascript-dependent solution, and since it comes with alterations on the structure of the document, I’ll just drop it right here and move along to the really intersting part of the problem, which is the simpler CSS solution.

Why CSS? Well, simply because most ofthen than not, you need to use PNGs within an external CSS, and javascript stops there.

If you didn’t get a chance to read the !important; article, I strongly recommend you do so before moving along with this article.

Normally, in CSS, we set a background image like this:

.style {
background-image: url(img/png-file.png);
}

, which works in any sane browser, but not in IE.
In IE, as I was saying, you MUST do it like this:

.style {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=img/png-file.png);
}

As you can see, we have two different properties trying to accomplish the same thing. If you already read the above-recommended article, you’ll understand how the solution to this problem is to apply a double !important; , like this:

.style {

background-image: url(img/png-file.png) !important;

background-image: none;

filter: none !important;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=img/png-file.png);

}

This way, FF will “see” one valid background and zero filters, while IE will “see” zero background and one filter. Problem solved. That’s it for today…