Opacity Filter Not Working in IE6

Live example, with the code:


<style>
div {
	border:2px solid black;
	background-color:green;
	width:100px;
	height:100px;
	filter:alpha(opacity=25);
}
</style>

...

<div></div>

It works in IE7/8, but not 6. The div has width and height, so this shouldn’t be a hasLayout thing, right? What am I missing?

You are wasting your time supporting IE6. Less and less people are using it every month. Google has dropped support for IE6. You should, too.

changed it to ie6 :slight_smile:

all works, as you can see. try IE Collection instead of IETester.

sure :slight_smile: one thing though, have you clicked on the “To help protect your security…” bar appearing just above your page and choose “Allow blocked content” to allow filter to execute?

I use IETester, so the “protect your security” bar didn’t show up. Also, I notice that the browser in the picture you provided says “IE 5.5”

Maybe it’s nothing, but the filter does work when I try it in a 5.5 tab (or 7, or 8) and doesn’t work in 6.

At first I thought it could just be the way I have my browsers set up, but now (given that it only fails in the IE6 tab) I suspect there’s some kind of hasLayout quirk that I’m missing, or something.

I tried your code, but it still didn’t work. I couldn’t see the p at all. Myabe my set-up is screwy. Can you post a screenshot?

IE5.5 is the same as IE in quirks. Not just IE6

And I’ve no idea where the thread is. You can view my recent posts (maximum 100-200 posts back) if you wish to find it.

Off Topic:

We’ve had this discussion, both perrform the same :slight_smile:

I tried IE Collection, but it won’t work on my machine. The address bar refuses to show up, and it won’t load any pages, so it looks like I’m stuck with IE Tester. :S

Can you point to the thread? I was under the impression that IE 5.5 was the same as IE6 Quirks.

it’s working.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {
	border:2px solid black;
	background-color:green;
	width:100px;
	height:100px;
	filter:alpha(opacity=25);
    z-index: 999;
}
div, p {
  position: absolute;
  top: 0;
  left: 0;
}
p {
  padding-top: 30px;
  z-index: -999;
}
</style>
<title>goddamn</title>
</head>
<body>
<div>First</div>
<p>Second</p>
</body>
</html>

try selecting the Second.