Hyperactive’82

Posted by
Ziwei

Posted On
Jan 27 2010 1:33 am

Ran into some hair-tearing problem with IE again. This time with its opacity filter. Apparently, you have to declare the width and height of the element where you are applying the filter for it to work even though a block element is suppose to get its width and height from its contents, at least, that’s how it works for safari and firefox.

This issue has been observed in IE 7.0 and IE 6.0, IE 8.0, however do not exhibit this problem.

See the example below, you will need to view it in the culprit browser which is IE 7 or below to see the problem and solution.

Opacity filter before setting the width and height

<div style="display:block; filter:alpha(opacity=50); background-color:#000;">
<div style="height:100px; width:100px; padding: 20px; color:#FFF">50% transparency</div>
</div>

The above example will render as a solid black box with no transparency in IE 7.0 and below

Opacity filter after setting the width and height

<div style="display: block; filter:alpha(opacity=50); background-color: #000000; height: 100%; width: 100%;">
<div style="padding: 20px; height: 100px; width: 100px; color: #FFF;">50% transparency</div>
</div>

At last the opacity filter is working now.