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.

Note: I posted this in the CSS Forum because I thought the issue could be fixed primarily via CSS modification. Correct me if I'm wrong.

By the way, I am using IE v7.0.5730.13IS.

Extremely transparent??

Transparent is transparent, as in glass is transparent.

the variation from solid to transparent is called opacity (degree of opaqueness) or inversely you can have levels of transparency ranging ranging from 0 (solid) to 255 (transparent) this is Alpha transparency

And could I just ask ....

What "share" button?

Transparent is transparent, as in glass is transparent
...
you can have levels of transparency

Right, if you want me to be more accurate: I was implying varying levels of semi-transparency, i.e. varying opacity.

Let's say the normal case is an opacity of X (screenshot). However, in IE 7 a glitch occurs and seemingly causes the opacity to become Y, where Y < X (screenshot).

I have tried the CSS/HTC solution (http://cavemonkey50.com/2005/12/the-...ie-hack-guide/) that someone recommended, but IE 7 doesn't seem to be correctly reading ie.css for some reason - it still seems to display the same PNG images and thereby the glitch still occurs.

And could I just ask ....

What "share" button?

It's an "AddThis" Share button at the bottom of the white box at http://www.principalinternational.co.uk/headlines/1242.

Never mind, I think I've fixed the issue by implementing the solution at http://css-tricks.com/css-transparen...-all-broswers/ with 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.

rendering the page quite unusable

To be honest, I just found the page completely unusable and annoying now.

I have a vision problem with low contrast colours and semi-transparent greyish text over a very busy background isn't by any stretch of the imagination very "usable"