IE6 opacity filter caveat

This one was a real pain. I was lucky to guess the solution.

I was working on a very small function to set alpha transparency on elements. This is what I came up with:

var ie = (document.all) ? 1 : 0;
var p = (ie) ? "filter" : "MozOpacity";

/* n is the element node
   v is the opacity value, from 0 to 100. */

function op(n,v){
    v = (ie) ? "alpha(opacity="+v+")" : v/100;
    n.style[p] = v;
}

(Yes, I know I left Opera and Safari/KHTML out of the equation.)

This function worked great in Firefox but nothing was happening in IE6. I tried a bunch of different tweaks, none of which worked. Adding an alert(n.style.filter); at the tail end of the function returned "alpha(opacity=50)" indicating that the value was being set correctly for IE6. But the element still rendered at 100% opacity.

Finally, I threw the function out altogether and applied the filter directly to the DIV element via CSS:

<div id="myDiv" style="filter:alpha(opacity=50);">
<img src="MyImage.gif" alt="Some Image Here" 
  width="50" height="50" />
<br />
This should be transparent.
</div>

But it still didn't work! IE6 stubbornly ignored the opacity rule. Even more confusing was that moving the opacity rule to the image alone did work. But only on the image, of course.

<div id="myDiv">
<img style="filter:alpha(opacity=50);" src="MyImage.gif" 
  alt="Some Image Here" width="50" height="50" />
<br />
This should be transparent.
</div>

I really needed the opacity applied to both the text and image. I was about to give up when it occurred to me that maybe the image width and height dimensions has something to do with it. By default, a block element takes on the width of its containing element and height of its content, but maybe IE6 was ignoring this when applying the alpha filter. So I tried this:

<div id="myDiv" 
  style="filter:alpha(opacity=50);
     width:100%; height:100%;">
<img src="MyImage.gif" alt="Some Image Here" 
  width="50" height="50" />
<br />
This should be transparent.
</div>

Yes! Opacity was now being applied to both the image and the text. I removed opacity rule from the DIV and was then able to correctly set opacity via the JavaScript function.

I don't have the luxury of testing this across the different flavors of IE, but it appears that alpha opacity in IE6 requires certain elements to have a specified width and height. What's funny is that when I tried Googling for answers to my problem, I found a ton of working examples that used opacity in IE6 successfully. Looking back now, all of those examples specified a CSS width and height on the element, but didn't make any specific mention of it as a requirement for IE. Removing the width and height caused those examples to fail, too.

UPDATE: Dean Edwards points us to the MSDN documentation for this little-known behavior. IE filters only apply to elements with "layout."