Transparent .PNGs under Supersleight

August 7, 2008 2:01 PM

Web design question about getting transparent .PNGs to show up right under Internet Explorer 6.

Internet Explorer 6, as you know from previous threads, doesn't support transparent .PNGs. So I plugged in a JavaScript solution by the name of Supersleight.js, which is supposed to be the easy workaround.

It's working, but there's just one thing wrong: On top of that beautiful transparent image, IE6 is displaying a "broken image" icon and surrounding it in a border associated with those times when the file is missing. Except it's not missing, because it's showing up.

The visual effect is that of a missing image displayed over a working background.

Any ideas as to how I screwed this up? Your help much appreciated.

posted by johngoren to computers & internet (7 comments total)

This happened to me too. Is it on every page you have the code on? I have a slightly different script, and I can't quite remember what's the solution to the broken image thing , but you might want to check the script and see if it's linking to the gif.
posted by curagea at 2:10 PM on August 7, 2008

Oh, I had a feeling it might have something to do with that "transparent gif," interesting.
posted by johngoren at 2:15 PM on August 7, 2008

You could use iepngfix instead.
posted by zsazsa at 2:16 PM on August 7, 2008

Thanks, Curagea, that was exactly what I needed. And now I will spend the rest of the evening fixing IE quirks without having to worry about that one.
posted by johngoren at 2:25 PM on August 7, 2008

this is a nightmare to deal with.

Zsazsa's thing:

This uses CSS "behaviors", a custom Microsoft extension to CSS. As such, it will not affect any other browsers like Mozilla and Opera which already implement good PNG support. It will also not help IE4.0 and IE5.0, which don't include the necessary IE filter, and does nothing with IE5/Mac (which natively supports translucent PNG foreground images, however).

Sounds like what I did before, conditional styles, using the MS filter for IE6 and normal CSS for the rest. One problem with this: IE7 understands both, and will double your image on top of itself. Really.
posted by drjimmy11 at 3:50 PM on August 7, 2008

drjimmy, yikes! I'll make sure to not use it in the future.
posted by zsazsa at 4:57 PM on August 7, 2008

drjimmy, yikes! I'll make sure to not use it in the future.

IME, iepngfix is the best transparent png fix solution for IE6 out there. If there was any image doubling occuring I'm going to guess it was a result of user error implementing the conditional stylesheets. I've had zero problems on the three or four different sites I've used it with.

The only thing iepngfix can't really do is background image tiling and background image location.
posted by fishfucker at 8:55 PM on August 7, 2008