Transparent .PNGs under Supersleight
August 7, 2008 2:01 PM Subscribe
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.
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.
Response by poster: 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
posted by johngoren at 2:15 PM on August 7, 2008
Response by poster: 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
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
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
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
This thread is closed to new comments.
posted by curagea at 2:10 PM on August 7, 2008