Solving PNG transparency problem (IE) within CSS file

theMAD2 · 23 Feb 2006 at 13:22

I've found a couple of pages talking about the PNG transparency problem in IE, and I've actually managed to fix it, but when I fix it Firefox (and all other non IE browsers) stop working. Here's my CSS code:

Code:

#whole {
	width:730px;
	height:432px;
	padding:10px;	
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/overlay.png', sizingMethod='scale');
	background-image:url(images/overlay.png);
}

Even if I put the filter last, the fact that the background-image loads means the transparency doesn't work. If I remove the background-image bit it works in IE, but obviously not any other browser. Is there a way I can put some sort of javascript or something in the CSS so that only IE reads the filter and all other browsers read the background-image?

Thanks a lot,
Dan

theMAD2 · 23 Feb 2006 at 13:50

That's great! All seems to be working, here's my new CSS FYI

Code:

#whole {
	width:730px;
	height:432px;
	padding:10px;	
	background-image:url(images/overlay.png);
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/overlay.png', sizingMethod='scale');
    _background-image:none;
}

Thanks everyone

theMAD2 · 23 Feb 2006 at 13:58

It's far far easier than a lot of the hacks I've found online which use javascript and some php lol. Well done mate

theMAD2 · 23 Feb 2006 at 14:02

Does IE7 have the transparency issue though?

theMAD2 · 23 Feb 2006 at 14:12

Doh!

Sorry mate

theMAD2 · 23 Feb 2006 at 15:55

Just noticed a problem with the fix, in IE the links don't work when I use the alpha channel fix, any idea why this is happening?

theMAD2 · 23 Feb 2006 at 16:55

Yeah tried that, basically I've found that the above fix for IE actually makes the image on the very top (no matter what z-index you use). So...*sigh* yet another bug to get around. What I have done in the end is:

Code:

#left {
	float:left;
	width:345px;
	height:422px;
	padding:10px;	
	overflow:auto;
	background-image:url(images/overlay.png);
	background-color:#94ddc6;
	filter:alpha(opacity=80);
	opacity:0.8;
}

And this actually sets a colour and gives it an opacity. It seems to work on IE and Firefox, AND all child elements inside the div that are hyperlinks work. Here's more info:
http://www.domedia.org/oveklykken/css-transparency.php