John Kavanagh : Indie Web Developer

Eight years ago when IE6 was released, the majority of websites were still single-colour, square-edged and table-based with the occasional hard-edged animated gif. Microsoft could be forgiven for not implementing transparency support for PNGs because at that time there was no need for it, and since the majority of people accessing the internet were sucking it through an asthmatic 56k dial-up modem, web developers couldn’t use the larger-file sizes in their sites anyway.

Times have changed since then but sadly IE6 still takes up enough of a market-share of browsers on-line that this incapability to render the transparent sections of PNGs is almost crippling. Below is a screen shot from a PNG-dependant website I developed last year part-way through it’s development: I’m only pleased it didn’t look worse in IE6 than just a simple transparency problem..!

Disastrous though the realisation that the website you’ve toiled over looks like a collection of grey blocks to 40% of the internet-using public, there are fortunately two very simple fixes. The only thing that you should bear in mind is that both are relatively resource-intensive (using JavaScript or IE’s filters), so don’t weigh down all of your visitors with the same processes - make sure that you feed the fix to only those who need it (those people still using IE6 or below). You can see more about Internet Explorer Conditional Statements in my blog here. Just for reference, here’s how the same site looks in FireFox 3 with all the alpha transparencies correctly rendered, this is ideally the same look that needs to be achieved even in IE6:

Option One: Use Microsoft’s DX Image Transform
If you’re only using a few PNGs in your layout and they’re all in your CSS, then this is the easiest and quickest way to make sure just those images show their transparency properly. If you’re predominately using PNG images in your CSS but also have a few dotted around your site in the main content, then consider either repalcing these with block-level divs with the PNG set as a non-repeating background, or try Option Two below.

To set up filtering on PNG images, you will firstly need to create a separate style sheet for IE6 and include it in the header of each page on your site, wrapped in a conditional IF statement. Since Internet Explorer browsers with version six and below are effected, but so are various different incarnations of IE6 (for example IE6.5), we’ll be using the lt modifier on IE7, this doesn’t target IE7 itself but does target any version of Internet Explorer below it:

1
2
3
4

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

Having done this, you now need to identify each element in your CSS that makes use of PNG images, set the background back to none and then use the DX Image Transform declaration to set the PNG back in place, alpha transparencies and all! Think of this method as removing the original version of the image from your document’s flow, and replacing it with a filtered version - we have to reset the background to none to start with for every element otherwise MSIE will render both the PNG which appears in your normal CSS file (without any filtering) and then secondly will also render and display the filtered (with transparencies) version - negating the whole process because the unfiltered version will still display.

Below is an excerpt from the IE6 CSS file I created for a recent project of mine (Nice Pictures) where the layout made heavy use of PNGs (and still a chunk of their target audience use IE6). Just copy the code below, change the element name to whatever yours is called and the PNG source, and repeat for any other transparency-dependant elements in your CSS.

1
2
3
4
5

#content div.film div.box-top{
	background:none;
	filter:progid:dximagetransform.microsoft.alphaimageloader
        (src='http://www.nicepictures.pro/img/bg-film-top.png', sizingmethod='crop');
}

Just one note: the src link you see above should refer to the image from the perspective of the HTML file where the PNG appears and not from the CSS file, which leads to complications where you have a site spread out over multiple levels and folders. Of course, you could just use a complete URL for each image rather than a relative link for the filter (as I have done in the example above), it bloats the CSS slightly but it’s more than worth the trade off for expandability and function of your site.

view the IE6 PNG fix CSS file for Nice Pictures here

Option Two: JQuery PNG Fix
The alternative that I use just as frequently as the option above is to use Andreas Eberhard’s JQuery PNGfix plugin. This is almost as simple as plug-and-play, although it will be a little less useful to you if you’re building on a framework other than JQuery and if you’re not using a JavaScript framework at all, it would seem a little wasteful to force IE users to load two large JS files when they could almost as easily load the smaller CSS file from the option above.

Eitherway, to set up the JQuery PNG Fix plugin download the zip from Eberhard’s website, unzip it and put it somewhere safe on your domain. We could use the same conditional statement as above to target only those users who really need it (those using IE 5.5 or IE6), but in actual fact a detector is already built into the plugin so there isn’t really any need and some older browsers can be a little hit-and-miss about javascript inside conditional if statements. So, include the JavaScript file and initiate the PNGFix when the document has finished loading:

1
2
3
4
5
6
7

<script type="text/javascript" src="/js/jquery.pngFix.pack.js"></script>
 
<script type="text/javascript">
	$(document).ready(function(){
		$('div.examples').pngFix( );
	});
</script>

If you’ve done it right, and if your user doesn’t have JavaScript disabled (which is very unusual but worth considering if you are likely to have a large number of visitors from behind corporate firewalls), then this is the end of your alpha transparency woes!

This is the same method I use in this very blog, so feel free to poke around the source of this page if you want to see exactly how it’s set up.

Visit Andreas Eberhard’s official jquery.pngFix.js site here

Of course, there are plenty of other methods to help you along the way if neither of these options work for you - give it a Google!