By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,773 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

PNG loses transparency when opacity filter is applied in IE7

Unicron
P: 8
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.
Feb 18 '08 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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'
Feb 18 '08 #2

Unicron
P: 8
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.
Feb 18 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
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.
Feb 18 '08 #4

hsriat
Expert 100+
P: 1,654
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
Feb 18 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.