CSS PNG Image Fix for IE

We’ve all seen them, the hoards of PNG fixes for IE6. That is because IE6 is a bag of smashed buttholes. I’m serious. It is. That is why we (web designers of the new world) have to continually come up with creative ways to solve the PNG issue. In case you are lost, just realize that in IE6, PNG images with transparency do not show their transparent regions, so you have to use some crazy IE6 proprietary filters. Moving on.

Lately, in projects I have been using a modified CSS snippet I found out on the interwebs to automagically replace PNG images with their AlphaImageLoader equivalent in IE6. Check this out here and I’ll explain and give an example:

The CSS/Code

* html img,

* html .png{

position:relative;

behavior: expression((this.runtimeStyle.behavior="none")&&(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 = "transparent.gif"):(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)

);

} 

Update: This code changed to remove the behavior at runtime based on @Thierry’s suggestion.

For you purists out there, this is extremely hacky, so you may want to skip this whole entry entirely.
Update: : CSS Conditional comments for IE are a perfect way of hiding this hacky code from the good browsers. Here is a way to bring in the CSS for only IE 6 and below:
<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="png_fix.css" />

<![endif]-->

Ok, there won’t be much in the way of explanation here, but let me explain what this little bad-boy does.

The Selectors

* html img,

* html .png
The selector portion of the CSS rule targets which XHTML tags/classes this rule will be applied to. At first glance, it looks like all img tags as well as all tags with a class of "png". You’ll notice the (star) html in front of both of these. Wait, there is no “anytag” preceding the html tag, so this won’t get applied! True. For all non-crappy (that is a pro term by the way) browsers, this rule won’t get applied. However, since IE6 is a pile, it thinks that there is a tag before the html tag, so it will apply this rule. Great! Now IE6 is the only browser that will use this rule.

The Rest of the Code Jargon

Honestly, the rest you really don’t want to mess with much, but it suffices to say that this expression does a few things:

• If the tag is an IMG tag, the expression checks to see if it is a .PNG image. If so, it applies a CSS AlphaImageLoader filter to the IMG tag to load the PNG file as a background image. It then points the src attribute of the image to a transparent gif so that the image isn’t overlaying it’s own background. Voila! Note: This only works well for images not resized by the browser. Also, you’ll need a transparent gif 1px by 1px image on your server.
• If the tag is not an IMG tag, then this expression takes the CSS given background image and shoves it into a background AlphaImageLoader filter. It then removes the real CSS background-image rule so that the background and the filter are not conflicting.

Pretty cool! Please note that this CSS expression is pretty generic. If you have some crazy CSS-ing to do, you might want to stick with using your own methods or apply the AlphaImageLoader filter manually.

Also, if you are a standards-compliant junkie and this brushes you wrong, remember that this is intended to help with the crud of browsers. Sometimes we have to break our own rules to do the job.

A Demo!

Let’s see a demo! See the goodness below:

My Image Tag:

My Generic Tag

Wish I could Play.

My Link Tag

Update: Links will need an additional rule of cursor: pointer; to restore the cursor. I’ll have to change that in the script to do that automatically

This is my link.