[thelist] Woes with partial transparency PNG (or why IE sucks)

sasha spam at bittersweet2.com
Fri Oct 18 15:03:01 CDT 2002

I am working on a design that makes use of a partial
transparency image in PNG 24 format (save for web on
Photoshop 7.0).  The partially transparent image is
sitting on top of another image so that the navigation
text can be read and the image below is still visible.
The design is mostly white with very soft grey as

Opera 6.05 & Netscape 7.0 - partial transparency

Netscape 4.78 & 6.0 - partially transparent image
interpreted as plain white; acceptable

Internet Explorer 5.0 & 6.0 - partially transparent
image interpreted as nasty grey image; completely

So the way I see it, these are my options:

Change to PNG 8 format and use one of transparency
dithering options.  This is still interpreted as a
perfectly smooth semi-transparent image in Opera, but
IE 5 (probably IE 6 also), NS 6, and NS 7 all treat it
like a faked semi-transparent GIF (you know, checkered
1 pixel alternating white & transparent).  Looks
highly tacky.

Use a faked semi-transparent GIF.  As mentioned above,
looks highly tacky.

Stick with just a solid plain white background.  Does
not look nearly as nice, but is the preferred fall
back should the browser not support partial
transparency on PNGs correctly.

Use browser detection.  Results are unpredictable at
best.  Too many people using "non-traditional"
browsers are forced to fake their user agents to get
past roadblocks currently on the web by incompetent
designers.  Most non-traditional browsers handle a
partially transparent PNG just fine.

Exploit the bug in IE 5's CSS interpreting.  Some of
you may be familiar with this trick:

voice-family: "\"}\"";

IE 5.0 will ignore the rest of the definition that
appears after that and continue interpreting the rest
of the CSS information starting with the next
selector.  Unfortunately, this does not work in IE
6.0, and my statistics show that IE 5.0 now has only
2/3 the users that IE 6.0 has.

Use proprietary CSS to emulate the partial
transparency.  Completely unacceptable, since I am
actually working towards 100% validation in HTML 4.01
transitional and CSS-2.

Are there any other options I have regarding Internet
Explorer's crappy PNG support?  I'm not entirely
opposed to browser detection for such a small thing,
but I want to be reasonablly certain that I am only
catching IE users.  I realize I can't help it that
some browsers like Konqueror can completely fake their
user agent, but browsers like Opera only fake a
portion of the user agent.  I am using PHP as my
backend, so providing the appropriate content based on
the user agent should be relatively painless.


More information about the thelist mailing list