The Linux Page
Home

PNG Fix for IE 5.5 and 6.0

Submitted by on Thu, 09/10/2009 - 22:56

If you don't work on creating web pages, you are probably not much aware of the creativeness necessary to make them work in Internet Explorer 6.0 and older.

Today, I had to make PNG images work in IE 6.0 since one of my customers still has that version of the browser and his website has several PNG images that require to have a working alpha channel.

The code required is fairly straight forward, but the trick is to create a new placeholder that's absolutely positioned where you load the PNG with a special function that will ensure that the alpha channel is taken in account. All of that is nice, you will say, so what?

When you place an object with an absolute position and you want things to appear at the right location, you need to take the z order in account. By default, this is automatic, but in this case it uses a jQuery script to go through all the images, but not through whatever else you may have in the page.

In the case of my customer, I have a PNG in the middle of the page that can be clicked. When clicked, a sub-dialog appears and the user can enter his or her information to be contacted by the dispatcher. In IE 6.0 the sub-window would appear behind the PNG... Argh!

My fix was simple, I transformed the PNG in a JPEG and it worked just fine. That PNG has some white edges that match 100% the background and thus it had no transparency.

There is the Javascript code, by Andreas Eberhard, that fixes PNG images:

/**
 * --------------------------------------------------------------------
 * jQuery-Plugin "pngFix"
 * by Andreas Eberhard, andreas.eberhard@gmail.com
 *                      http://jquery.andreaseberhard.de/
 *
 * Copyright (c) 2007 Andreas Eberhard
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Version: 1.0, 31.05.2007
 * Changelog:
 * 	31.05.2007 initial Version 1.0
 * --------------------------------------------------------------------
 */

(function(jQuery) {
  jQuery.fn.pngFix = function() {
    var ie55 = (navigator.appName == "Microsoft Internet Explorer"
               && parseInt(navigator.appVersion) == 4
               && navigator.appVersion.indexOf("MSIE 5.5") != -1);
    var ie6 = (navigator.appName == "Microsoft Internet Explorer"
              && parseInt(navigator.appVersion) == 4
              && navigator.appVersion.indexOf("MSIE 6.0") != -1);
    if (jQuery.browser.msie && (ie55 || ie6)) {
      jQuery(this).find("img[@src$=.png]").each(function() {
        var prevStyle = '';
        var strNewHTML = '';
        var imgId = (jQuery(this).attr('id')) ? 'id="'
                    + jQuery(this).attr('id') + '" ' : '';
        var imgClass = (jQuery(this).attr('class')) ? 'class="'
                    + jQuery(this).attr('class') + '" ' : '';
        var imgTitle = (jQuery(this).attr('title')) ? 'title="'
                    + jQuery(this).attr('title') + '" ' : '';
        var imgAlt = (jQuery(this).attr('alt')) ? 'alt="'
                    + jQuery(this).attr('alt') + '" ' : '';
        var imgAlign = (jQuery(this).attr('align')) ? 'float:'
                    + jQuery(this).attr('align') + ';' : '';
        var imgHand = (jQuery(this).parent().attr('href')) ? 'cursor:hand;' : '';
        if (this.style.border) {
          prevStyle += 'border:' + this.style.border + ';';
          this.style.border = '';
        }
        if (this.style.padding) {
          prevStyle += 'padding:' + this.style.padding + ';';
          this.style.padding = '';
        }
        if (this.style.margin) {
          prevStyle += 'margin:' + this.style.margin + ';';
          this.style.margin = '';
        }
        var imgStyle = (this.style.cssText);
        strNewHTML += '';
        if (prevStyle != '') {
          strNewHTML = '' + strNewHTML + '';
        }
        jQuery(this).hide();
        jQuery(this).after(strNewHTML);
      });
    }
  };
})(jQuery);

And you also want to have a small snippet in your <head> tag to run the jQuery function: 

<!--[if lte IE 6]>
	<script type="text/javascript">
	$(document).ready(function() {
		$(document).pngFix();
	});
	</script>
<![endif]-->

As you can see, it is pretty simple, although hard to just invent! I'm sure Andreas used some documentation either from Microsoft or some advance Internet Explorer hacker.

Obviously, you will have to somehow include jQuery for the functions to work at all.

AttachmentSize
jquery.pngFix.js.txt2.89 KB