Yesterday I went to show someone Unthirsty on their home PC. Of course their PC was riddled with malware and ran like a 3-legged dog. I groaned when I saw the IE7 icon on their desktop. I had tested the site a bunch of times in IE 6, but when I saw the IE7 icon I realized I had never tested it with Unthirsty. Reluctantly I opened it and typed in unthirsty.com in the address bar…and can you guess what happens next? The map comes up on the page completely blank. Why is it whenever you go to show someone a site you’re proud of, it doesn’t work?
Originally in Unthirsty I added in a great Javascript hack that makes transparent PNGs work in IE6. This worked great in IE 6, but as you now know, it caused some problems in IE7 when using Google Maps, causing the map to be blank upon loading. If I switched to satellite view it worked, then back to the regular view, the map corrected itself. But obviously that’s not the solution I wanted. So I changed this:
<!--[if gte IE 5.5]> <script type="text/javascript" src="/lib/pngfix.js"></script> <![endif]-->
To this:
<!--[if lt IE 7]> <script type="text/javascript" src="/lib/pngfix.js"></script> <![endif]-->
If you’re not familiar with the weird if gte IE 5.5, it’s Microsoft’s way of letting you tell versions of Internet Explorer to use what’s in between those comment blocks. Here I’m telling it to include the pngfix.js file if the version of IE is greater or equal to 5.5. Since this also includes IE7, I changed it to include it if the IE version is less than 7. Problem solved.
I hope this helps someone that is having the same problem, but at the same time this should be a wake up call to a lot of developers out there. CHECK YOUR SITES IN INTERNET EXPLORER 7! Especially if you made any hacks to accomodate IE 6 flaws.
Hi Matt,
I’m experiencing the same problems. I also resolved this using codintional comments for IE. But the biggest problems for me arise in IE6, it is definataly not loading the map, but also screwing around with my pngfix.js. Sometimes the page just dies, sometimes it shows my png’s with the nasty grey edges.
Have you found a solution, but my seach on the internet has only shown me that it is a common problem, but unfortunataly not one with an easy solution!
thaks
I too had the same problems with the map not showing up in IE, it turned out that the png fix hack was causing the bug if it tried to fix png inside the google map, so I put in a some code to ignore all pngs that are inside the google map div tag. It seems to work, but seems a little slow to load
HTML
.
.
javascript
// IE does not display the google map if we try and do this hack
// so ignore all pngs that are in the map parent
function parentNotMap(img){
var pn = img.parentNode;
rt = true;
while (pn != null){
if (pn.id == “map”){
rt = false;
break;
}
pn = pn.parentNode;
}
return rt
}
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i”
img.outerHTML = strNewHTML
i = i-1
}
}
}
}