IE PNG Transparency Glitch

Hi, I'm having an issue with transparent PNG images in Internet Explorer. It doesn't seem to occur in Firefox, Opera, Safari or Chrome.

Check out this page in IE: http://www.principalinternational.co.uk/headlines/1242. The table backgrounds are transparent PNGs.

Now hover over the "Share" button at the bottom. The PNGs suddenly become extremely transparent, and they remain like this, rendering the page quite unusable.

This also occurred previously in another case: I had implemented some JavaScript that causes sub-menu items to fade in after a user clicks on one of the main menu items on the left. However, in IE, whenever a user clicks on one of the menu items when the fade-in menu is implemented, the PNGs become extremely transparent (just like with the "Share" button), so I have scrapped the feature for the time being.

Does anyone know what causes these PNGs to become extremely transparent in IE? Feel free to look at and reference the source code.

IE6 doesn't support alpha transparency of PNG images. You'd either need to add CSS/javascript fix (google for it) or use an 8 bit transparent PNG (see http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/)

It's IE v7.0.5730.13IS, not v6. Nonetheless I'll try your suggestions.

Im not sure but I think this may help you it has a transparent png bit on it http://cavemonkey50.com/2005/12/the-ultimate-ie-hack-guide/

I've tried the following as recommended:

http://christopherschmitt.com/2007/10/30/png-transparency-for-internet-explorer-ie6-and-beyond/

http://cavemonkey50.com/2005/12/the-ultimate-ie-hack-guide/

However, for whatever reason, IE 7 doesn't seem to be correctly reading ie.css, as the PNG images still seem to appear in IE and thereby the glitch still occurs.

I would try using 8-bit PNGs, but I would only want IE to use them (I want the other browsers to use the current PNG images), and since IE doesn't seem to be reading ie.css atm, I don't think it will work.



By the way, I want to clarify something from my first post as I realize I may not have been very clear: I was implying varying levels of semi-transparency, i.e. varying opacity.

Let's say the normal case is an opacity of X (screenshot (http://209.85.48.8/311/141/upload/p2620565.jpg)). However, in IE 7 a glitch occurs and seemingly causes the opacity to become Y, where Y < X (screenshot (http://209.85.48.8/311/141/upload/p2620566.jpg)).

Never mind, I think I've fixed the issue by using the solution at http://css-tricks.com/css-transparency-settings-for-all-broswers/ on GIFs, instead of using transparent PNGs. However, to anyone who reads this, please let me know if the semi-transparent backgrounds on the site don't seem to be working correctly on your browser.

In short my friend, in all IE's upgrades, they still don't support transparent PNGs. You think they would have gotten it by now. So you have to hack your code to make it work. Always. And it seems they never will fix this, darn renegades!! ha ha