PNG loses transparency when opacity filter is applied in IE7

[Unicron]

Hi everyone. The title says it all.

I have a collection of PNGs with drop shadows. They work great in IE7 and FF.
If I add filters in my stylesheets, such as

icon {

filter: alpha(opacity=10);
-moz-opacity: .10;
opacity: .10;

}

then the PNG shadows all turn into solid black pixels (even If I say opacity 100).
Has anyone ever dealt with this issue? This is for an internal application for use by only a few dozen people, so I am not against hacks.

[drhowarddrfine]

IE6 has never worked with alpha transparency on png although ALL other browsers have for years. IE7 does though. Here is one hack to fix IE.

btw, modern browsers understand 'opacity' so it's not necessary to use '-moz-opacity'

[Unicron]

Thanks for the reply. I will drop the -moz line.

I had actually already looked at that hack from a google search, but I didn't think that applied as it was meant for IE6, which we don't use.

IE7 displays transparent PNGs just fine unless the filter is applied, regardless of whether its from a stylesheet or a javascript event handler.

For example, I have a button that toggles the icon to 10% opacity. It loads fine with a shadow, then you hit the button and the shadow of the icon suddenly turns solid. If I toggle it back to 100%, the image is still solid.

If I can't get it working, there's always Flash.

[drhowarddrfine]

I don't know how I got IE6 out of that.

I don't know anything about 'filters' either as I would never use them.

[hsriat]

I think there's a problem with IE7 displaying PNGs.

Make a PNG image (w/o alpha) and then save it as GIF or JPG.
Embed them together in an HTML file and open it in IE7.
There would be a difference in the colors of PNG from GIF (or JPG) while in Firefox, they'll look same.


But talking about filters, the DOM for images' filters are different in IE from others..

IE - imageObject.style.filter.opacity = 0 to 100
Others - imageObject.style.opacity = 0.00 to 1.00