Why does IE put a gray background on my image?

[John Salerno]

Here is my first JavaScript experiment (naturally a rollover!). But my
question is about the image itself. It looks fine in Firefox and Opera,
but in IE it has a gray background. The image itself has a transparent
background, so I have no idea where the gray comes from.

http://www.johnjsal.com/button.html

 

[Roy Schestowitz]

__/ [John Salerno] on Sunday 05 February 2006 08:19 \__

Here is my first JavaScript experiment (naturally a rollover!). But my
question is about the image itself. It looks fine in Firefox and Opera,
but in IE it has a gray background. The image itself has a transparent
background, so I have no idea where the gray comes from.

http://www.johnjsal.com/button.html

Internet explorer does not handle high bit-level (32 bits?) transparencies.
This affects alpha blending rather badly. The solution is often to embed the
object in background with the same colour as that which IE renders the
transparency part. The other solution is to persuade everybody to upgrade to
good Web browser, thereby allowing the IE deficiency take it toll rather
than be worked around. The issue should have been addressed in the
development of IE7.

Roy

 

[Neredbojias]

With neither quill nor qualm, John Salerno quothed:

Here is my first JavaScript experiment (naturally a rollover!). But my
question is about the image itself. It looks fine in Firefox and Opera,
but in IE it has a gray background. The image itself has a transparent
background, so I have no idea where the gray comes from.

http://www.johnjsal.com/button.html

It's because it's a png. IE doesn't do png transparencies well. Try a
gif.

 

[Toby Inkster]

It's because it's a png. IE doesn't do png transparencies well. Try a
gif.

And with a little creativity, you could serve up a transparent GIF to any
browsers with "MSIE" in their user-agent string, and a PNG to everyone
else.

Alternatively, there are a few tricks to get IE to handle alpha-blended
PNGs. They don't make for pretty coding, but can give you pretty pages.

 

[Alan J. Flavell]

And with a little creativity, you could serve up a transparent GIF
to any browsers with "MSIE" in their user-agent string, and a PNG to
everyone else.

Don't do that - it's bad in principle, and works badly in practice.
For all the usual reasons.

PNG versus GIF can be successfully negotiated on the basis of the
client's initial Accept: header. As far as I recall, even MSIE gets
this correct enough to be useful - at least on its initial request.

Apache's MultiViews will do this pretty much for free, out of the box,
if you let it.

(MSIE has a silly habit of sending "Accept: */*" when reload is used,
but I guess we can live with that. Workarounds would likely have
negative impact on real WWW browsers, so I won't suggest those. But
your proposed kludge would have negative impact on /all/ of the real
WWW minority browsers that feel they need to masquerade as MSIE in
order not to get locked out by idiot webmasters.)

 

[Toby Inkster]

Don't do that - it's bad in principle, and works badly in practice.
For all the usual reasons.

Pah! I'll agree that detecting browser by user-agent string is generally
rather hit-and-miss, but this is one particular application where
user-agent matching won't cause any problems.

Potential pitfall #1: a non-IE browser has "MSIE" in the user-agent string
and gets sent a GIF instead of a PNG. This isn't a huge problem -- the
only browser that does this by default is Opera, but this will change in
version 9.0. And when a browser does do this, it gets the GIF, which
should still look fairly good -- just not as good as the PNG.

Potential pitfall #2: vice-versa. It is possible, but difficult to change
the u-a string for MSIE. But because it's quite tricky, not many people
will have done it, so not really worth worrying about. Besides which, the
only problem they'll experience in this case will be cosmetic.

 

[Alan J. Flavell]

Potential pitfall #1: a non-IE browser has "MSIE" in the user-agent string

[...]

You've only bothered with the *obvious* pitfalls. As you say, those
are basically cosmetic, in relation to the present problem.

Then there's cacheability, particularly in relation to those who
(knowingly or unknowingly) are accessing web resources via a proxy
cache server.

Using proper content-negotiation techniques such as MultiViews would
at least behave protocol-correctly in that regard. You may not think
the practical consequences are ideal - but it's the best we've got,
whenever you have a requirement to send different content to different
clients. And at least if *you* play your part in that concordat, the
other participants always have a chance to improve the part which
falls to /them/

Whereas, if you kludge your part, none of the other participants gets
the chance to do better.

 

[Neredbojias]

With neither quill nor qualm, Toby Inkster quothed:

And with a little creativity, you could serve up a transparent GIF to any
browsers with "MSIE" in their user-agent string, and a PNG to everyone
else.

Alternatively, there are a few tricks to get IE to handle alpha-blended
PNGs. They don't make for pretty coding, but can give you pretty pages.

Quite true, although I think AJF has a bit of a point. Anyway, alpha
pings confuse me so I prefer the simplicity of a gif (with, sadly, its
256 color limit) when dealing with web transparencies.

 

[kchayka]

alpha
pings confuse me so I prefer the simplicity of a gif (with, sadly, its
256 color limit) when dealing with web transparencies.

So, use 256-color png instead. IE handles them the same as gif, plus the
resulting image size will be smaller than a 24- or 32-bit png.

In the OP's case, alpha transparency isn't really needed, anyway.
Indexed transparency is plenty adequate.

 

[Neredbojias]

With neither quill nor qualm, kchayka quothed:

So, use 256-color png instead. IE handles them the same as gif, plus the
resulting image size will be smaller than a 24- or 32-bit png.

Oh really? I didn't know that (although I _have_ found that pings are
usually smaller than gifs when the number of colors is the same.) I'll
try it the next time I need simple transparency.