How to get image transparency working on IE

Question

I have a GIF image that has an alpha set, and when my site loads in Firefox 3.0, it acts transparently on the parts of the image that should. However, when I try to load the GIF image in IE7, it comes back as a solid block. Actually, it is like the color from the image bled into the transparent area.

Do anyone have any suggestions for resolving this kind of problem? Pointers on what to look into, or a route you've used to solve this kind of problem.

I've been controlling this in CSS -- and while I'd like to avoid the conditional comments route and multiple CSSes, I'd be willing if the suggestion tangibly shows how I can resolve the IE compatibility problems.

Thanks, Sean

Answer 1

Try these two -- mess with the numbers until you get it right. i 4get which is for IE and which is FF/chrome

opacity: 7;
filter: alpha(Opacity=7);

Answer 2

I don't recall ever having a problem with transparent gifs in IE (any version).

First off try loading the image on its own - this will tell you if it's the image or some CSS rules going awry.

If it's still wrong, try re-saving it with a different program. The gimp will do.

Edit: It's at the CSS level so I'd check for which rules have the background colour that is appearing... hopefully it should be easy to find a likely candidate. Change the color to #ff0000 and check if the image changes as you expect. Then figure out why that rule shows on IE but not FF. If you have a URL for the page I could take a look.

Answer 3

I fixed a gif transparency problem by switching to png. IE7 renderes png alpha channels correctly.

Printing transparent pngs still does not work right in IE7.

Answer 4

This is weird -- I found the problem in what I thought was commented out statements in the CSS file:

//margin-top: 46px;
//background-color: #377696;

which was in the element that contained both images.

I upvoted each answer. Thanks!