A lot of the sites we do in work involve using a Google map, some are simple and just allow the user to choose a spot which populates input fields for latitude and longitude. Others contain large data sets and information about the point, which is normally displayed in one of the Google map bubbles.

Using our standard library code for implementing a map and allowing the user to pick a latitude / longitude point IE6 was only displaying a grey background with the Google copyright.

My first line of attack was to go through the Javascript, but even displaying a basic map on the page was giving the same results.

So I started from a blank page and managed to get a basic map up and working. Then stepping through my real page I discovered that something in the style sheet was causing the error. I know that IE can throw a wobbly if you don’t declare the width and height of the map div, in particular the width. But both these values were declared in pixels.

I eventually got to the bottom of it and it was a png fix I have been using for IE6. I know it’s not practical to make sites look exactly the same across browsers but when you have a large portion of IE6 users it’s hard to tell them that they will receive a version of the site that doesn’t match up to what they were expecting.