Discuss: Cross-Browser Variable Opacity with PNG: A Real Solution

by Michael Lovitt

161 IE5 doesn't know AlphaImageLoader

As stated on MSDN ( http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp ) the AlphaImageLoader filter is only available in IE5.5 or later.

Therefore, yeah, my script doesn’t work with it. Many other things don’t work with it too.

posted at 07:38 pm on November 4, 2003 by Mihai Bazon

IMHO people shouldn’t use web browsers that are obsolete. If MS falls behind the demands of greater technology <cough cough smirk> than perhas we shouldn’t use IE, and all the fools who use crap browsers can see crap web pages. I guess if you’re a pro web designer, you can’t really write this off, but this is garbage. 7+ years of PNG, and we have to use hacks for MS’s browser to display a transparent image properly? One of the many reasons I haven’t paid for anything MS outside of a few games, since DOS.

posted at 11:38 am on November 25, 2003 by Kevin

163 Here is the answer!!

I was just re-reading this article today and many have made some great contributions in the discussion. Surfing from one suggestion to another, I came across Drew McLellan’s solution (actually an alteration of youngpup.net’s) – a very tidy JavaScript that seems to make the whole IE PNG support issue disappear. I recommend, found here:

http://www.allinthehead.com/retro/69

posted at 05:09 pm on December 3, 2003 by Chris Jensen

164 virtue of simplicity

Tested quickly in IE5 & 6, Opera 7 & Mozilla Firebird all on Win 2000.

Pro:

posted at 07:38 am on December 5, 2003 by James

165 virtue of simplicity

Delivers a 50% transparent png across browsers without resorting to script. The con is that IE sees the png 50% lighter than png24-happy browsers. Potential to resolve this with further filters if important.

css selector { background-image: url(“example.png”); background-color: transparent; filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); }

um, that’s it… try out the files at: http://www.vgfx4.com/examplePNG.zip

posted at 07:46 am on December 5, 2003 by James

166 hackety hack

Give browsers what they deserve:
http://www.pixy.cz/blogg/clanky/cssunderscorehack/
.class { background:url(nicepng.png); _background:url(uglygif.gif)
}

and a link to http://www.tbray.org/ongoing/When/200x/2003/07/17/BrowserDream with style=“visibility:hidden;_visibility:visible”

posted at 12:35 pm on December 5, 2003 by farlukar

167 i used the techniques in this article

i tried out some png variable opacity for my site’s redesign, and it should look fine in most browsers/platforms.

check it out at http://www.inthegray.com

posted at 06:24 am on December 11, 2003 by eric

168 MS is a business

If your product already controls 102.6% (or the latest percentage being thrown about) of the market then would YOU add features?

Doesn’t make sense for MS to fix IE unless it starts losing market share.

posted at 06:46 am on January 22, 2004 by Andrew

169 Alternative (8 - Bit color <10K PNG)

i know use, and apply hacks daily at my job as a web developer. back in my college days circa 2001, i had to make this course database engine with PHP, Oracle, and some godforsaken CSS that I couldn’t touch. The backgrounds changed by semester (ie 01 02 03….) and the whole color scheme rewrote itself. The designer asked me to make a .PNG work in IE so noone had to keep remaking the .GIF background color to match.

> Solution: use PHOTOSHOP and set the .PNG setting in ‘save for web’ WITH transparency, but all in 8-BIT color or less. This means your image will be ugly, if you didn’t hand craft it.

It should be noted variable transpareny works in IE with .PNG’s in 8Bit or less color and under a certain file size.(10K i believe).

posted at 11:43 am on January 22, 2004 by Matt Teece