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

Posted in Design Tips on 6 July 2009 16 comments

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 great coder.

In case you can’t find the solution using the correct 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 </head> tag.

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

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 put 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 :

<div class="pngfix" style="background-image:url(images/SEE_I_HAVE_PNG_AS_BACKGROUND.png);">
..content..
</div>

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

5. Side Notes

I placed blank.gif in a folder called “images” and of course I would have to edit the htc file. However, I used “images/blank.gif” instead of “/images/blank.gif” as suggested by the author 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 position set. In my case, my div has position:relative and it throws this alert to me.

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

<div id="DIV_WITH_PNG_BACKGROUND" class="pngfix">
<div class="the_fix" style="position:relative;">
</div>
</div>

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

The Great Coder

All credits to Angus Turnbull.

 

Posted by Zen on 6 July 2009 • 22,140 visits 16 comments
Tags : , , , ,


or Subscribe to specific category only :




  - 16 Comments


lancome says:

Great Job Here?I enjoyed it..! Gary

rakesh says:

Wooo!! Thanks a lot. It solved the alert problem and great script by Angus Turnbull!!

zen says:

You are welcomed :p

Ara Bruno says:

Having a problem actually displaying the background image after I get it to stop displaying the “EPNGFix: Children of positioned element are unclickable:…” message. Any specific reason for this?

Darren says:

Great fix, thank you! If you’re like me and were simply receiving the error message but the links WERE still clickable, just follow the instructions in step 6 to remove the error message.

dlh says:

I just got a dialog box 1EPNGFIX: unclickable children of element: . I haven’t the faintest idea what this is or what it effects, etc.???

Om Prakash tiwari says:

I also use to also this tag “Position:relative;”. but it not work properly. if any body know that about please help me.

Krish says:

Thanks man, ger8 job!!

balaraju says:

Thank u Very much

Sasha says:

Thanks for the tip for posiition relative. I have removed all positions on png backgrounds and everything is clickable again! Great!

Brent says:

Not working for me. i am testing on a hacked version of IE6 so i can have two versions installed but it works for everything else so… the nested div does not help, I get no js alert, my button works but the image is now moved and does not align the way it was supposed to – applying the position relative to the second div does not help maintain the layout ie. the reason for positioning in the first place! – not expecting a reply but if someone is kind enough I would really appreciate it

marco says:

Great, it works!

Jack wills uk says:

Nice one, there is actually some good points on this blog some of my readers may find this useful, I must send a link, many thanks.

There is noticeably a bundle to learn about this. I assume you made sure nice points in features also.

Your place is valueble for me. Thanks!…

I think am just having some problems with subscribing to RSS feed here.

You made some respectable factors there. I appeared on the web for the problem and found most individuals will associate with with your website.

Steven says:

Great fix!!!
I was really stuck on this problem…
Why is IE always such a PITA?

Anna says:

Been looking all over the place för this fix, thx a million!

arbaoui mehdi says:

Great solution , thank’s :)

Leave a Reply

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Previous Post
«
Next Post
»