You are: Home » Web Programming » How to display transparent PNG images in IE6 (IE6 PNG Hack)
24
Jul
2010
11721 Views

How to display transparent PNG images in IE6 (IE6 PNG Hack)

As a Web developer you surely stumbled upon the display issue of transparent PNG images in the buggy Internet Explorer version 6 (IE6). As much as I would love that IE6 gracefully disappear, the reality is that according to Global Market Share Statistics there is still 13.06% of the users (as of December 2010) that still use this browser. Mostly in educational institutions, hospitals, government institutions, and big corporations where version updates is very slow.

From my experience, there are few things you could do to solve this problem:

  1. You could ask users to upgrade to the latest version of IE (currently IE8). But you know that this is not a practical solution, as corporations tend not to upgrade often. From a personal point of view users have no excuse not to upgrade. If it is a personal project, you can ignore all the IE6 users. But for professional or commercial projects, you can´t ignore them.
  2. Avoid using features (ie. transparent PNG images) that are not supported by IE6. Personally I don´t like to use a hack for any browser unless I have to. I just stick to using code that works in all browsers. For example, if the image degradation is not significant, try replacing the PNG image with a GIF image.
  3. If you MUST use a transparent PNG image in your website. To make the PNG image work on IE6, I have 2 solutions for you (known as IE6 PNG hack):
    1. First Solution: You could use the iepngfix.htc hack. Download a copy of the file iepngfix.htc and insert something like the following code in between the <head> … </head> tag. Make sure to read the instructions carefully at IE PNG Fix website. 
      <!--[if lt IE 7]>
<style type=“text/css”>
  .logo img { behavior: url(iepngfix.htc);}
</style>
<![endif]-->

      Caution! If you are using this hack for a CMS websites (e.g. WordPress), make sure to include the absolute file path of the iepngfix.htc file, since as you may know that a relative path will not work in WordPress. Therefore the above will change to:

      <!--[if lt IE 7]>
<style type=“text/css”>
  .logo img {
behavior: url(<?php bloginfo('template_url'); ?>/iepngfix.htc);
}
</style>
<![endif]-->
    2. Second solution: You could use the following JavaScript code (download the png_fix.js code): 
      /************************************************
Filename: png_fix.js
This code is your life saver for the PNG images
transparency issue for the buggy IE6. This code
might not work on all transparent PNG images.
*************************************************/

/* IMPORTANT: 
If you use this JavaScript code for a static website, a relative path will be fine
Example: var clear="images/clear.gif"; //relative path to clear.gif

BUT for WordPress Websites it is a MUST to use the ABSOLUTE (FULL) path, otherwise this code will not work.
*/
//Absolute path to clear.gif
var clear="http://bacsoftwareconsulting.com/blog/wp-content/themes/indezinerpaperwall/images/clear.gif"; 

pngfix=function(){
var els=document.getElementsByTagName('*');
var ip=/\.png/i;
var i=els.length;
while(i-- >0){
	var el=els[i];
	var es=el.style;
	if(el.src&&el.src.match(ip)&&!es.filter){
	es.height=el.height;
	es.width=el.width;
	es.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+el.src+"',sizingMethod='crop')";
	el.src=clear;
	}
	else{
	var elb=el.currentStyle.backgroundImage;
	if(elb.match(ip)){
	var path=elb.split('"');
	var rep=(el.currentStyle.backgroundRepeat=='no-repeat')?'crop':'scale';
	es.filter=“progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path[1]+"',sizingMethod='"+rep+"')”;
	es.height=el.clientHeight+'px';
	es.backgroundImage='none';
	var elkids=el.getElementsByTagName('*');
	if (elkids){
	var j=elkids.length;
	if(el.currentStyle.position!=“absolute”)
	es.position='static';
	while (j-- >0)
	if(!elkids[j].style.position)
	elkids[j].style.position=“relative”;
	}
	}
	}
	}
}
window.attachEvent('onload',pngfix);

      Call the above javaScript file (png_fix.js) from your HTML document before the </head> tag, like so:

      <!--[if IE 6]>
<script type=“text/javascript” src=“scripts/png_fix.js”></script>
<![endif]-->

      I am assuming that the JavaScript file is in the ´scripts´ folder. If not, make sure that you put the right path. Also you need the clear.gif image (for Internet Explorer, to save the image to your local drive, right click on the above link and choose ´Save target As…´).

For this Blog, I had to use the IE6 PNG hack for my Logo/Name at the top of this page. In my case, I had no choice but to use a transparent PNG image since first I don´t have a solid color background, and second replacing the PNG image with a GIF image, significantly degraded the image quality. Therefore; the only option left for me is to use the IE6 PNG Hack. Below is the image display difference in IE6:

Image with the IE6 PNG hack
transparent PNG image displayed in IE6 with the hack code

Image without the IE6 PNG hack
transparent PNG image displayed in IE6 without the hack code

If you reached that far and liked this post, consider linking back to it. Thanks!

Related Article(s):

  1. WordPress Comments – IE8 HTTP 500 Internal Server Error
  2. WordPress Editor Behaves Strangely in Internet Explorer

Last Updated: March 20, 2014
Written by:
Tags: , ,
Posted in Category(ies): Web Programming
Word Count: 857

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

5 Responses to “How to display transparent PNG images in IE6 (IE6 PNG Hack)”

  1. Scott says:
    October 19, 2011 at 12:19 PM

    I have recently written this article to show you how to export png 8 in Fireworks. http://tocs-i.com/blog/how-to-export-transparent-pngs-from-fireworks-that-have-a-small-file-size-and-work-in-ie6/

  2. Andrei says:
    February 17, 2011 at 2:27 AM

    Hey Boutros,

    I love your design, and this post was very helpful. My only question is regarding your logo. Instead of PNG hacking it, why didn’t you include it as part of the background image, then make an invisible div over it to function as a hyperlink?

    The only reason I say that is that looking at the left side of the logo, the boundaries of the rectangle are visible, which wouldn’t happen if it was part of the background.

    Nevertheless, stay classy.

    • Boutros AbiChedid says:
      February 17, 2011 at 6:04 AM

      Thank you Andrei,
      You are right, that’s another way to do it. I did not think of it at the time. Nevertheless, PNG hack is important for other images that can’t be included as part of the background as long as IE6 is still around.

      … looking at the left side of the logo, the boundaries of the rectangle are visible …
      Interesting that you see boundaries on the left side of the Logo in IE6. I don’t see anything, and I tried it on different computers.

      The Questions I always have: When Web designers/developers will stop spending exta efforts just to please users using a very old and buggy IE6 browser? I understand, it is not the user’s fault but all these institutions (mostly government, hospitals, …) that don’t want to spend the extra money to upgrade to a newer and more secure browsers.

  3. Attif says:
    November 30, 2010 at 1:52 AM

    I am working in an company where people are using outdated browsers IE 6 version and I have a problem in seeing the PNG image in one of my page in the website. I tried copying the script by following the instructrion given above. The thing is that i have no acess to my server which is handled by IT section due to security reason. I am trying to test this using my local server and still there is problems. Will this work only on the live server.

    And when i copy the Script to the HTML page

    do i need to exactly copy the same or remove the !– from the script

    Please advice me how i should paste the above script in the HTML page?

    I am on a deadline and the management has given me time till tomorrow.

    Please help me…..or i am dead

    • Boutros AbiChedid says:
      December 1, 2010 at 4:14 PM

      Hi Attif,

      I am not sure which solution you tried. I listed 2 solutions (3.a for First and 3.b for Second). If the first solution did not work for you you might need to add the directive: AddType text/x-component .htc to your .htacess file. For this solution you do need access to
      your server. You will not be able to test this locally. Read the instructions carefully at: IE PNG Fix Website. I think it is clear.

      For the second solution (step 3.b the javaScript code) you can test this on your local machine and see if this works for you before adding it to your active Website. Yes, you paste the script exactly as it appears above. Download a copy of the png_fix.js file and call it from the <head> tag of your html document (I am assuming that you are using a static website)

      In both cases there are 3 things to be cautious about: If you running a CMS website, make sure you put the full/absolute path and not the relative path. You need a copy of the blank.gif image. Also make sure that the file path is correct.

      If you still unsure what to do, you can share a copy of the Webpage address you are having trouble with the PNG image display, and I will take a look.

      Boutros.