Reply to comment

Its often what happens when building websites which feature a range of different components, that some won't play nice with others.

I discovered a perfect example of this while building a new Drupal site which was to include interactive Google Maps, using the ,GMAP module.

In order to make the website work as well as look halfway decent in the cursed IE6 browser, I had to use a Drupal Theme that included a pngFix JS/CSS fix for transparent PNG images. This is not usually a big problem, and the use of transparent PNG images for website logos etc, makes placing them over textured/gradient backgrounds sooo much easier.

However, I quickly discovered that the google maps would also get caught in the crossfire of the pngFix solution, so that when I loaded my website in IE6, it looked great, and all the google map MARKERS showed up - but there was no sign of the actual Google map images themselves! Just a big blank grey box where it should be, dotted with markers in the appropriate places. (On a side note, the map did actually appear once I hit the Google map Zoom buttons... but obviously thats not good enough).

I did however find a solution for the problem, on the blog of the creator of the particular pngFix solution that happened to be built into the Drupal theme I was using.

Heres where I found the pngFix solution:
http://campbellsdigitalsoup.co.uk/about/png-fix/
(This script, by the way, seems to be the best fix for transparent PNGs for IE that I've tried - and there have been MANY).

To get the solution to my problem working, I had to slightly modify the examples given however, to the following:

Working solution for my site - needs to be wrapped in javascript script tags of course:

$(document).ready(function() {
$("img[@src$=png],#yourcssid,#logo").pngFix();
});


That replaces this script tag that was originally in my theme code:

$(document).ready(function(){ $(document).pngFix(); });


As you can see in my working code example, instead of applying the pngFix to every image in every page, it is only applied to the CSS id's specified. In my case the thing that did it was to apply it to a DIV with the id "logo".