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

Augmented · 23 Feb 2006 at 13:42

Place the IE-only rules in a separate styleheet, and serve the stylesheet only to IE through the use of a conditional comment: http://www.quirksmode.org/css/condcom.html

nav... · 23 Feb 2006 at 13:42

only IE will parse links with an underscore in front...

so add an underscore to the filter and define a secnd background image with an underscore before it, defining no background image.

might work

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

nav... · 23 Feb 2006 at 13:56

ok, that hack is copyright me 2006

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

Augmented · 23 Feb 2006 at 14:00

nav... said:
ok, that hack is copyright me 2006

Be aware that the underscore hack has a different meaning in IE7 - that parser bug has been fixed. Properties with underscores will be added to the DOM as a custom CSS property, and ignored as their old interpreted property as in IE6. In this case, it's not an issue, because PNG alpha-transparency is in IE7, but for other cases it's not a good idea to rely on that particular hack for future compatability

.

theMAD2 · 23 Feb 2006 at 14:02

Does IE7 have the transparency issue though?

Augmented · 23 Feb 2006 at 14:04

theMAD2 said:
Does IE7 have the transparency issue though?

No, it will be support natively, as I said in the post above.

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?

nav... · 23 Feb 2006 at 16:34

you sure you're not laying an element over the actual links thus making them unclickable?

think about your z-indexs and stuff.

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