An IE7 PNG Fix Drupal Module
0 min read
Ah, Internet Explorer and transparent PNGs, a match most definitely not made in heaven.
Everyone knows that IE6 had poor PNG support, but all those problems were solved in IE7 right? Please? Sadly, while things did improve dramatically in IE7, if you have ever seen anything like this first image you've found the reason this IE7 PNG Fix module exists.
Fortunately there is an easy work around for this which involves wrapping the image so that one filter can be applied to the image and the other to the wrapper. That, in a nutshell, is what this drupal module does. As you can see from the second image, the transition now works properly and the transparency is maintained.
This module is a "drupalisation" of a jQuery script written by Darko Zoroja that is available here: http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem. To use it you will need to provide a CSS class that identifies the effected PNGs to the module, it will then use Darko's script to dynamically generate a wrapper element that will have the transition filter applied to it so that the original PNG transparency filter will be the only one directly applied to the PNG image.
In case you are wondering why this module is on GitHub.com and not Drupal.org, the quick answer is that the world does not need another IE specific PNG fix Drupal module. The good folks at Drupal.org suggested this module should be incorporated into one of the existing IE PNG Fix modules. I agree that this would make sense, but wasn't able to wrestle any interest from the other modules' maintainers and so, after procrastinating almost long enough for IE7 to fade from relevance, I finally decided to put it up on GitHub.
You can download the module from: https://github.com/thejibe/IE7-PNG-fix