Search code examples
internet-explorertransparencyfirefox-3

How to get image transparency working on IE


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


Solution

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