As a regular part of creating websites, I include a Javascript script to add Portable Network Graphics (PNG) transparency to Internet Explorer 6. The script I use is called iepngfix and was created by Angus Turnbull of Twin Helix Designs.

There are other similar scripts, but most if not all of these pngfix scripts incorporate an IE-only CSS behavior attribute that targets image elements. The pngfix.htc behavior script scans the page for PNG images and applies an IE transparency filter. This results in proper transparency on the website. There are some limitations. See the PNGFIX page for details.

Enter Google Maps

Google Maps, when incorporated into a website as an interactive map, includes its own code to handle PNG transparency in IE6. These two scripts conflict with each other, and the result -- for me at least -- has been missing or invisible map controls, no Google logo in the bottom left corner of the map, a blank or partially drawn Google Map.

The Fix

After a lot of research and my own testing, I've come up with a pretty simple solution: Stop the pngfix.htc script from targeting the Google map. This can be accomplished with one line of CSS:

* html div#map img { behavior: none; }

The * html portion targets IE6 and earlier browsers but not IE7 nor any other browsers. The div#map img targets the Google Map, and the remainder overrides via CSS specificity any application of IE behaviors to the Google Map images. PNG transparency is applied, however, to other PNG graphics on the page.

Best practices would suggest moving the IE6-only CSS into its own file and placing the file reference in your XHTML between conditional comments.

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />
<![endif]-->

Of course, if you use conditional comments as shown above to target IE6, * html may safely be omitted from the line of CSS since IE7 and other browsers will not apply any portion of the CSS file.