Unfortunately, the web design world’s most hated browser, Internet Explorer 6 (IE6), is still used by enough of our clients potential audience that we still have to make exceptions in our coding and designs to support it.
This is article will give you a quick overview of why we use Unit Interactive’s “Unit PNG Fix” to allow us to overlay images with partly transparent pixels that are just the standard in the newer and better browsers.
We’ll even show you how to add it to your site with a quick walkthrough!
So what is IE6’s problem?
Basically, it can’t render the partial (alpha) transparency aspects of .png files, leading to ugly grey backgrounds ruining the image’s effect.
Can’t I just use a .gif image?
IE6 has always been able to handle .gif type images but this limits web designs because every pixel in an image must be either completely opaque or completely transparent. This means that matching the colour of your images to whatever you have underneath becomes very difficult. If the background colour changes, for example when your mouse hovers over it, this becomes impossible without swapping in a different .gif image specifically for that colour background.
So, here is what makes Unit PNG Fix the best solution
- It only requires a tiny bit of code and a 1px square image: The whole fix is a shade over 1kb and the 1px image is a piffling 43 bytes! Not much extra overhead to fix all your .png issues site-wide, eh?
- Need your .png image to be used as an element’s background? Unlike some other fixes out there, Unit PNG Fix works on any .png image inserted as an HTML image OR the background of any HTML element.
- It’s easy to install!
Installing Unit PNG Fix
Step 1) Download the fix here.
Step 2) Extract the files to your website’s root folder.
Step 3) Include the .js file. By wrapping this in conditional comments, we can have the fix load only when the user is using an older version of IE than IE7. This ensures the fix only loads in browser that needs it, IE6.
// Sets following code to only be read by OLDER versions of Internet Explorer than IE7
<!--[if lt IE 7]>
// Include the Unit PNG Fix script
<script type="text/javascript" src="unitpngfix.js"></script>
// Returns to code for all browsers
<![endif]-->
Step 4) Ensure the clear image is in the correct location. Open the unitpngfix.js file and ensure the path to the clear.gif image or, if you choose to have the image in a separate folder (for example ‘images’) you can update your path to ‘images/clear.gif’.
Step 5) There is no step 5!
Try it for yourself!
The limitations.
No PNG fix is perfect (IE6 just has too many problems to fix easily).
You cannot use a .png as a repeating background, it will only stretch to fill the element’s dimensions.
Also you cannot use background positioning on a .png background in IE6 so you may still have to factor that into your designs and HTML structure.
Still, at least you’ll get that lovely alpha transparency look in your ten year old web browser!
