IE PNG Fix Round up

Tuesday the 26th of August, 2008 at 10:54 am

I was passed a site design the other day to chop into XHTML/CSS and I knew right away I was going to have to deal with IE6 and transparent PNGs. There are many of these out there but there are a few that have, for me, stood out so I thought I would try and list a few of my favourites and layout some of their pros and cons.

jQuery IFIXPNG

This is this is the fix used on this site. It simply plugs into the wonderful jQuery with one javascript file and one tiny gif img. After loading jQuery and ifixpng add something like $(’img[@src$=.png], div#logo’).ifixpng(); to your jQuery code and you are away. I must add that there may well be more and/or better jquery plugins doing this now. I have not looked into it as unfortunately the agency weren’t using jquery at the time on the latest project I needed a png fix on.

PROs

It is simple to use and works well and quickly.

CONs

It runs on jQuery which is obviously a positive thing, unless of course you are using another framework or none at all. There is no support for repeating backgrounds or positioning them.

TwinHelix IEPNGFIX

The TwinHelix IEPNGFIX is possibly the mother of all ie png fixes and they have recently launched v2 and is in alpha at the moment but is still usable. I have just looked and coincidentally this has been updated today to v2 alpha3. To set it up upload the files and add something like:img, div, a, input { behavior: url(/css/resources/iepngfix.htc) } to your head or into the style sheet.

PROs

This has so far been the most robust. It handles positioned backgrounds and sort of repeating ones. The only way at the moment for png fixes to work with repeating backgrounds is to stretch the image. This works perfectly for things like shadows and gradients but not for lovely tiled image patterns and things like that so be aware that it has limitations. You might be asking why this is in the pro section when it has such a flaw. Well anyone who has used png fixes before will know this is a massive advantage over a lot of fixes, especially older ones. This is starting to become standard in fixes but this still has been the best I have found.

CONs

The script only effects ie6 which is ideal but from what I have seen it certainly slowed down the page load on ie6. I have not run any specific tests so this is just from observation but there is such a difference to make it obvious that the fix is causing a slow down. As a caveat this is still an alpha release and performance may increase with future releases.

Unit PNG fix

A relative new comer but this is certainly a good option.

PROs

This is by far the easiest to install. Add files, link to javascript… next step oh wait… thats it! Once it is installed it will find all of your pngs (background and inline) and fix them automaticallyAlso with a file size under 2k you are barely going to notice it is there. Again this has limited but existing support for background repeat and positioning.

CONs

I tried this on the site I wanted to use it on. The design was graphic heavy and complex, so there were a lot of pngs and a lot of elements with absolute and relative positioning. Unfortunately Unit PNG fix caused some problems with some of the css positioned elements. This is most likely the fault of the complex design and there may be an easy solution out there.

Conclusion

Firstly, unless you are using jQuery there is no point in installing it just for ifixpng. If you are using another library there is probably and equal equivalent. There maybe other plugins for jQuery that come with repeat/positioning support but like I say I have not looked, but this is currently a big drawback. I will probably moved to an alternative solution for the next version of this site. Having said that if you do not need some of the advanced features of the others and you prefer to keep everything jQuery related then this might be the perfect solution for you.

So which one should you use? Well the obvious answer is to use the right tool for the job. With Unit PNG fix being so quick, easy and small I would highly recommend trying this first. If your design is not overly complex and not using many positioned elements with PNG backgrounds there may be no issues (or only easily fixed ones). If this is the case I say “STOP” you have found the answer to your IEpng problems!

However if, like me, Unit PNG fix makes your page look funny I would suggest going with TwinHelix IEPNGFIX. For me it made the page look exactly how I wanted with relatively few changes. While there is certainly a page load slowdown (in ie6 only) it is worth living with to get your complex designs looking how you want them, but if you have no need for the added versatility there is no need to reduce your page loads. As I needed it this is the option that I went with on the project in question.

IEPNGFIX is still in alpha so future versions may not cause slow down but even then I would still suggest trying Unit PNG fix as it is by far the easiest to install as you do not need to specify what you want fixed. I realise this is a small saving but on a big site this could potentially save unexpected elements looking funny.

If you know of any more please feel free to list them in the comments. I’m hoping that one day soon we will be able to stop supporting such outdated software as IE6 but for the time being these fixes are incredibly useful for creating beautiful cross browser sites.

Categories: Javascript/ Web Design
Comments: Comment (RSS) | Comment
Support: Digg it | Float it | Trackback