Another Bug in IE

So imagine you’ve got this image of two cats complete with a nice drop shadow. One half of the image has a white background, while the other half has no background (indicated by the standard Photoshop checkerboard background pattern).

cat-source.png

You want to display these cats programmatically on your Web site in response to some user activity. Naturally, the most logical thing to do is to fade them in using the standard opacity=0 to opacity=1 animation.

In Safari or any other non-busted browser, you’d see the following: on the left is the image when opacity= 1 and on the right is when opacity= 0.5.

cat-safari.png

But in IE7, which seems to be brain-dead is still so many ways, you see the following lovely example of Microsoft Quality: on the left is the image when opacity= 1 and on the right is the nasty result of setting opacity= 0.5 (using the stupid Internet Explorer technique of an alpha filter).

cat-ie7.png

That’s really not very helpful is it?

What does your browser display?


Note: Jina would kill me for having inline styles in the HTML above, but for some reason the <style> block I tried to add got munged by Markdown.