IE6 PNG Transparency Fixes

Looked for a few solutions for the IE6 transparency problem:

SUPERSLEIGHT:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Basically trialling supersleight right now, its like a magic bullet that just whacks all the transparent pngs on your page without you having to do anything except include link to supersleight.js in conditional comments in your head tag. Think this is the best thing to try first since its so quick to get working.

I like especially that conditional comments mean this is all kept away from everything else. Apply it to the whole site, then go through page by page (browsing in a complete version of IE 6 of course) and see if its messed anything up, like links becoming not clickable, forms not working, or backgrounds becoming positioned weirdly. Then you can add specific fixes for these in your IE only stylesheet. If your lucky, it will work right out of the box, because in the supersleight code its applied fixes for making links clickable and making INPUT (forms stuff) areas work.

If any links etc dont work, the easiest way to fix is put in your IE only stylesheet the thing thats not working with position relative and z-index:1 for good measure. You can just list everything you can think of aswell to be paranoid:
a, li a, INPUT, TEXTAREA, SELECT, OPTION, BUTTON {
position: relative;
z-index: 1;
}

Sometimes it still will break things, like when i had an image map, the rollovers stopped being active. I had to apply a position:relative to the div that was containing the image map which is a child of a background which has transparency. Dont think about it too much, just whatever is not working, put a position relative on the div it is in. (But if its in a div that has transparency, youll need to make and extra div wrapper inside the div that has transparency, and make THAT position:relative. Theres also the issue of it not being applied to the rolled over image out of the box, but havn't got to that yet, think it just has be be called again when the image is rolled over.

ALPHAIMAGELOADER ON ITS OWN:
If your lucky and your site has only a couple of transparent areas, ie backgrounds, then you can apply fixes specifically using the AlphaImageLoader on its own. This below worked fine for a background that i had set to background-repeat:repeat, BUT it was a FLAT colour background that was semi transparent, not a patterned one like stripes or something. It stretches your background which is ok for a non-patterned background or non-gradiented background. actually might be ok for a gradient that repeats only one direction, havnt tried it though.

eg. in an IE6 only conditional commented stylesheet add your fixes
#adivwithatransbkrndthatrepeats {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrnd.png',sizingMethod='scale');
height: 1% /*might be necessary sometimes to make it have layout*/
}

if you want to apply it to a background image that dosnt repeat, ie a single logo that is a background image then use it with the sizing method crop instead.
#adivwithatransbkrndthatdosntrepeat {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrndthatdosntrepeat.png',sizingMethod='crop');
}

Your links etc that are in the div getting the fix will stop being clickable, so youll need to then apply the position:relative bizzo as described above. And it dosnt work on divs or whatever that dont 'have layout'.

TWIN HELIX:
Will probably try this if i cant get the rollover to work using Supersleight, because it says it supports rollovers out of the box. The thing that concerned me was the way the relative linking had to be, it looked like it was going to be tricky with multiple folders site structure.
http://www.twinhelix.com/css/iepngfix/demo/

Some other solutions are listed here with more full descriptions of options:
http://www.dedestruct.com/2008/01/13/cross-browser-transparency-with-png/

JQUERY:
http://jquery.khurshid.com/ifixpng.php
and following on:
http://plugins.jquery.com/project/iFixPng2

This is an example of a site that uses tricky side columns with transparency fixes
http://www.builtbybuffalo.com/