PNG fix and Google Maps
Problem with PNG for IE and Google Maps (GMap's) API.
-
Google Maps
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);
}
3 Comments on this post
Speak to an Expert now on 01225 444 674
Talk to Us
said “Thanks so much :)” years ago
said “Great idea” years ago
Michael said “Thanks!” last month