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

Liorean Liorean at user.bip.net
Fri Oct 18 15:58:01 CDT 2002


At 16:07 2002-10-18 -0400, sasha wrote:
>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 highlights.

IE Windows have bad support for that. There are a few quirks that you can
use though.

>Opera 6.05 & Netscape 7.0 - partial transparency perfect

Not ns7.0, I'm afraid. You aren't likely to see it if you're using images
that sit still on the page, though.

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

ns 6.0 was a pre-beta browser in reality, and had more bugs than all corel
products combined. It was also very early in the mozilla development.

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

Background colour seems to differ between versions of IE and even same
versions with different OSes. There are ways to get around this in 5.5 and
6.0 though.

>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.

IE does treat all alpha transparency values as completely transparent but
otherwise handles things like were they gifs, so using that instead of
dithering may be an option.. There's a workaround for true color images in
IE though, but not for palette images, so I suggest you use true color
(16-48 bit).

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

Well, it's got the browser support that PNG lacks, though.

>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.

This works, but it's often a pain if you want to change the design.

>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.

Well, Moz, IEMac, Opera does. There's a heap of browsers supporting all
parts but alpha transparency on PNGs though.

>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.

There's better ways for it in IE on Windows.

>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.

There's actually ways of doing this and keeping the code fully valid.

>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.

Ok, here goes:

It's  utilising conditional comments
<http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp>,
and here's an example:

<!--[if gt IE 5.5000]>
<style>img {behavior:url("pngbehavior.htc");}</style>
<![endif]-->

The behavior file itself is an edited version of the one described at
<http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html> and the image
x.gif used by it is a one pixel transparent gif.

~~~~<Source of modified pngbehavior.htc>~~~~
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
var supported=/MSIE
(5\.5)|[6789]/i.test(navigator.userAgent)&&/win/i.test(navigator.platform);
var real;
var blank='x.gif';
var reBlank=/x.gif/i;
if(supported)fixImage();
function propertyChanged(){
   if(!supported||event.propertyName!='src')return;
   if(!reBlank.test(src))fixImage();
};
function fixImage(){
   var src=element.src,x=element.width,y=element.height;
   if(src==real)return (element.src=blank)||0;
   if(!reBlank.test(src))real=src;
   if(/\.png$/i.test(real)){
     element.src=blank;
     element.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"',sizingMethod='scale')";
   }else element.runtimeStyle.filter='';
   element.width=x;
   element.height=y;
}
</script>
</public:component>
~~~~@~~~~

You could probably, if you tweak it a bit, make it replace the png with a
fake partial transparency gif in IE5.0.

// Liorean




More information about the thelist mailing list