How To Fix Unclickable Links When You Use PNG as Background Image in MSIE

You must have applied filter:progid:DXImageTransform.Microsoft.AlphaImageLoader to the css and found that the links became unclickable. In fact the solution was found by a fantastic coder.

In case you can’t find the solution using the right keywords (through web search), here’s the rewritten guide from that website.

The Guide

1. Loading an IE-Only CSS Stylesheet

We need to load another stylesheet if the visitor is using Internet Explorer. In this example, I call it ie.css. Paste these codes before tag.

2. Tells MSIE to Load a Behaviour File

Open up ie.css and paste the following codes into it.

img, .pngfix {
	behavior: url("iepngfix.htc");
}

You can assign the behaviour to more elements by using comma. For example :

img, .pngfix, div, p {
	behavior: url("iepngfix.htc");
}

3. Get the Behaviour File & Blank.gif

Download & Save

The behaviour file | blank.gif

Save them to your folder. If you want to place the blank.gif into another folder, make sure you edit the path in iepngfix.htc

4. How to use it?

Everything is kinda automatic now, depends on which element you assign the behaviour to.

An example based on the css above :

..content..

I assigned a class called “pngfix” to the div that has PNG image as background.

5. Side Clarification

I placed blank.gif in a folder called “metaphors” and of course I would have to edit the htc file. Though, I used “metaphors/blank.gif” instead of “/metaphors/blank.gif” as suggested by the instigator because it doesn’t work (at least for me).

6. I got an javascript alert – IEPNGFix: Children of positioned element are unclickable:…

Most probably the element that uses PNG as background-image has its CSS spot set. In my case, my div has spot:relative and it throws this alert to me.

How do I fix it? I produced another div inside the div with PNG image as background-image and apply spot:relative to the inner div.

To avoid the alert, you have to remove any CSS spot if your div uses PNG image as background.
Note that the spot:relative was given to the inner div instead of the outer.

The Fantastic Coder

All credits to Angus Turnbull.