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.
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.
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");
}
Download & Save
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
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.
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).
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.
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.
All credits to Angus Turnbull.
Great Job Here?I enjoyed it..! Gary
Wooo!! Thanks a lot. It solved the alert problem and great script by Angus Turnbull!!
You are welcomed :p
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?
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.
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.???
I also use to also this tag “Position:relative;”. but it not work properly. if any body know that about please help me.
Thanks man, ger8 job!!
Thank u Very much
Thanks for the tip for posiition relative. I have removed all positions on png backgrounds and everything is clickable again! Great!
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
Great, it works!
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.
Great fix!!!
I was really stuck on this problem…
Why is IE always such a PITA?
Been looking all over the place för this fix, thx a million!
Great solution , thank’s :)