PNG Image Fix For IE
If you are a web designer, you know that PNG image rocks for its fine transparency support. But lacking of support on IE6 and below, probably has gotten into your nerve at some point of your life.
The journey for PNG image fix on IE has started long ago, and it all voices back to the use of AlphaImageLoader filter hack.
<div style="height:400; width:400; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');"></div>
Some guys wrote Javascript codes to automatically reload PNG images found in image tags with AlphaImageLoader, an example would the pngfix.js by Bob Osola, the first you will find if you search for “PNG fix” on Google.
But the problems with Bob’s script, it fixes only the <img> tags, how about your <div> tags with PNG image background, and if you have small images, like an icon that I had with 12px height, the width and height will be distorted.
That will lead you to find a better solution to solve these two problems, and you may have bumped into TwinHelix IE PNG Fix or other similar solutions.
It fixes both <img> and <div> tags, and solve the width and height distortion through the use of blank.gif. On top of that, it uses a clever way of calling the javacript codes through CSS behavior attribute, supported only by IE, which gives you more choices on which element to fix.
img, div.img {
behavior: url("pngfix.htc");
}
And human is definitely an amazing creature, whom can not be easily pleased. Two weeks ago, Rogie King from Komodo Media, published a clever way to PNG fix through CSS. Now you do not even need an external file, such as pngifx.js or pngfix.htc.
The concept is similar except it is neater and cleaner, and the javascript codes are compacted and called inline from behavior attribute. After all, PNG images are more of a styling issue, thus putting the fix under CSS seems to make more sense.
This is the best I’ve seen so far to solve my PNG image transparency issue, probaby yours too. Thank you Roque.
UPDATE:
Here are the quick step-by-step instructions, as requested by some:
- Download pngfix.css, file created for your convenience.
- Download blank.gif, a transparent 1×1 pixel image to help out with the fix, mouse right click and save it to
/imagesfolder. - If you store
blank.gifin other folder other than/images, please editpngfix.cssto relectblank.giflocation. - Copy the following code snippet and paste it in your HTML source codes, inside
<head>tag, to load pngfix.css only for IE 6 and below; IE 7 doesn’t have PNG transparency issue.
<!--[if lt IE 7]> <link href="/stylesheets/pngfix.css" media="screen" rel="stylesheet" type="text/css" /> <![endif]-->
- That’s all, for all
<img>tags with transparent PNG images will be automatically fixed, while for background images defined in stylesheet, you will need to add"png"class name to the respective elements, e.g. assuming that “flower_bg” defines a transparent PNG background
<div class="flower_bg png"> Hope you get a clear picture now. </div>
TIP:
On some cases if you have a lot of <img> tags with only a few of them are transparent images, you can choose to remove * html img selector for performance reason (remember to remove the comma as well). Without that, you would have to add "png” class name for <img> that needs the tranparency fix.
UPDATE 2:
Original script may cause redundant background ‘none’ call to the server, which may be shown as page not found or server error in the access log. I did some fixes which solve this issue, more about this issue can be found here. Here are the updated version, I’ve also updated pngfix.css, the downloadable version.
* html img,
* html .png {
azimuth: expression(
this.pngSet?
this.pngSet=true :
(this.nodeName == "IMG" ?
(this.src.toLowerCase().indexOf('.png')>-1 ?
(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "/images/blank.gif") :
'') :
(this.currentStyle.backgroundImage.toLowerCase().indexOf('.png')>-1) ?
(this.origBg = (this.origBg) ?
this.origBg :
this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none") :
''
), this.pngSet=true
);
}
NOTE:
Note that the disadvantage of using PNG Fix is when you are fixing a background image, your image position will be always set to top left (0, 0) and repeated or tiled background will not work. The workaround for the positioning issue is to create an image with the spaces required from top left, for tiled background, I guess there’s nothing much we can do about it other than to avoid the fix.
Add Your Comment