News & Articles

Further to posting my article Definitive IE PNG Fix I have discovered a potential problem which involves the Google Maps API. The problem is that the Google Map won't render in Internet Explorer 6 or 7 if you use the PNG fix in the "wrong" way.

The original post detailed how to attach a CSS behaviour to img tags to script the browser into correctly rendering PNG's. I also suggested that it was possible to attach the behaviour to other HTML tags such as div's and ul's:

img,div,ul {
    behavior: url(iepngfix.htc);
}

Whilst this an excellent solution for saving time it causes problems for the Google Maps API in Internet Explorer as the map is enclosed within a <div> tag. As the API automatically deals with IE's inability to render PNG images, there is a conflict between the .htc behaviour and the Google Map's javascript. This results in the Google Maps failing to render correctly in Internet Explorer 6 and 7.

The solution is simple. Just assign the .htc behaviour to a class, and then add that class to each element you need a PNG fix for.

.png-fix {
    behavior: url(iepngfix.htc);
}