views:

133

answers:

5

hi!! i've a problem with png transparency in IE6.. below is the code which needs to be fixed

<input type="image" alt="rtf" src="/components/i/images/icons/rtf.png"/>

i saw some posts on this forum but i can't understand clearly.. can anyone walk me through the process of fixing it? thankx..

+9  A: 

There's nothing you can fix in that code because it's IE that's broken. You may want to have a look here for a workaround: http://www.twinhelix.com/css/iepngfix/

Cogwheel - Matthew Orlando
+5  A: 

Read this SO Post.

o.k.w
+1  A: 

Basically IE6 doesn't do alpha transparency properly. It has a go at doing transparency with PNG-8 images (with boolean transparency), but can't handle PNG-24 at all.

That's the default position.

If you need full-blown alpha transparency in IE6, then your best option would be to use a script which introduces hacks that make it work. There is supersleight which is quite slow. Or a better option which is DD_BelatedPNG which doesn't rely on the AlphaImageLoader.

Andy
A: 

I should point out that IE is very buggy when using transparent PNGs if you have the fix applied. This is because the AlphaImageLoader has a major flaw which can cause the browser to hang. This link has more details about a fix that works around the lockukp. However, in my testing, even that extensive fix was not sufficient. We still experienced IE6 browser lockups when viewing pages with PNGs on them.

You can work around the problem in a different way, with graceful degredation in IE, by using 8-bit alpha-channel PNGs. Not many tools can do this, but you can find information here and here. The 8-bit images won't crash IE, and will look good in IE7+ and all other browsers. IE6 will see images without the transparent parts. This may be acceptable for your design. If not, I'd consider changing the design if you care about IE6 at all. It simply isn't stable.

Mr. Shiny and New
A: 

Don't use PNG24 for icons. Convert the icons into PNG8 and crush the meta-data. This solves the IE6 Bug, save traffic and make your page faster.

You can use pngout for conversion. For crushing the PNGs you should use pngout, advpng, optipng and pngcrush

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB -brute -l 9 -max -reduce -m 0 -q FILE
optipng -o7 -q FILE
pngout FILE -q -y -k0 -s0
advpng -z -4 FILE

if the part with crushing meta-data to complicated, only save the image as PNG8 :)

Burntime