Getting IE6 transparency to work is now easier than ever before
Over the last few years I have learned how to live along with the dreaded IE6 browser and code in a way that keeps it happy most of the time and keeping bugs to the minimum. One area however that just keeps on frustrating me is the lack of transparency support for native transparent png in IE6.
Those of you who know Aurora, one of our most famous templates to date which uses extensive transparency, will be surprised to hear I am still struggling with png transparency, so let me explain…
Png transparency in IE6 – how hard can it be?
I am currently working on one of the up-and-coming new template releases for JoomlaJunkie (not Dark Rational) which uses a few elements of transparency – which I thought would be no major task after making an entire template transparent.
How wrong could I have been…none of the methods I was using for Aurora were working! Why? Well, because the images in this new template make use of transparent gradients which do not play along nicely with the “AlphaImageLoader” filter.
In Aurora, all the images were monotone repeating images which work perfectly with the filter using the “scale” method”. With this new template, when trying to use the”scale” method the image gets completely distorted and is therefore useless and the “crop” method, although shows the image correctly, does not repeat so also completely useless.
The above highlights some of the weaknesses in the traditional methods and IE6 transparency fixes. So, what to do..?
IE6 png transparency fixes
To date there are a number of fixes out there, some of which do an amazing job but all seem to fall down when using complex images and/or more than a few instances.
Here are some of the better ones I have tried:
What we need is a script that is able to do all of the above and one very important extra thing: to allow the images to repeat and be positioned just as they are with css. Now this is a tall order as it has always been the most limiting factor of any of the methods previously introduced.
And the IE6 png fix winner is…
Enter the new version of TwinHelix IE6 png fix 2.0
This little beauty fixes virtually all problems faced with IE6 png transparency, including an additional clever bit of Javascript that will do essentially what css should be doing in IE6 css – render the background positioning and repeat options correctly.
It is super easy to use and works a treat on every image I threw at it, all be it that they needed some tweaking to get working as needed, so here are a few words of caution..
- Make sure you use larger snippets of repeating images or it will bring IE6 to its knees and show significant reduction in load speeds. So instead of using a 1px by 1px image that repeats, rather use a 1px by 500px image and you will avoid this hassle.
- I had to set a “width: 100%” (in a separate IE6 css file) on some of the divs to get them to repeat the full div area. It seems to use the css variables to calculate the area to scale and if no width is set it can get it wrong, so this will help.
Most useful IE6 transparency fix available…or?
I am still testing this and I am sure there will be certain scenarios where things won’t work as needed, but by large this is hands down the most useful IE6 png transparency fix currently available (in my humble opinion).
That said, I am sure there are others I have not come across yet, so if you have some other solution, tool or fix you would like to recommend, please feel free to post a comment and I will definitely give it a test run.
Tags: css, Design, useful tips
We are in love with everything web and embrace technology as a means to drive social change.
