alpha transparency solution in IE

Question

I am building a website with a TON of png-24 files that have transparent background. In IE 6 they obviously aren't displayed correctly, so I need some sort of reliable, good solution that will fix the PNG problem in IE and require little work and be reliable. Any good ideas?

Answer 1

Here are a few good png fixes for ie6:

http://labs.unitinteractive.com/unitpngfix.php

http://www.twinhelix.com/css/iepngfix/

Answer 2

There are currently many options to get this working. The standard is apply a DirectX filter through CSS to change make the PNG transparent in IE6. There are even scripts that will automatically do this when the webpage loads from an IE6 or less client.

http://www.google.com/search?btnG=1&pws=0&q=transparent+png+ie6

Answer 3

There are a lot IE PNG fixes on the net, which basically all work with the same technique. The older Internet Explorers do not support alpha in PNGs directly, but they all have a filter that does so. So writing the following code as part of a css of an object puts the image in the src to the background of the element:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');

That way, you can easily display transparency in the Internet Explorer. However it's a lot easier to just get one of the png fix scripts (in JavaScript) and include it to your page inside of conditional comments. Then the script will make all your images working automatically.

Answer 4

For IE6 transparency I follow a personal flow:

1. If there is just one or two PNG images (like a logo, or a normal image) I just use filter:

#selector {background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='crop');}

Problems: If applied to a link, it will no longer be clickable. Possibly apply to the h1#logo and have the a be transparent.

2. If I have a lot of 24-bit PNG files, or special use cases (repeating background, etc), I use DD_belatedPNG

IMPORTANT FOR IE7 + IE8: You cannot animate or combine the filter:alpha (which is used for overall opacity on an element in IE and also used by jQuery to set opacity) property with 24-bit transparent PNG images. It changes it to look like 8-bit transparency, with everything that is not 100% opaque or transparent taking on a black background.

Answer 5

We used Dean Edwards' IE7 for this. (So named before IE7 came out.) It's been good for that kind of thing.