views:

466

answers:

4

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

+1  A: 

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);
StingyJack
+1  A: 

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.

Greg
It is at the CSS level.
torial
+1  A: 

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.

Ryan Michela
Warning: Alpha transparency on 24-bit PNGs does not work on IE6. Use 8-bit.
Diodeus
A: 

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!

torial
Ah... that's not a CSS comment! CSS only uses /* This is a comment */
Greg
Also, you may want to close your question.
R. Bemrose