Controlling the CSS Opacity Rate of Child Elements in Transparent Parents in Internet Explorer

This article is rather old. Please, read the updated version for a cross-browser solution.

The alpha transparency filter applied on parent elements is inherited by their children, which is not always the desired behavior and can create unwanted design effects.

However, due to a browser bug in Internet Explorer, there is a cool hack that allows not only to reset the alpha transparency of the parent element in its children, but also to control the opacity ratio of its children transparency.

And this rocks! And is done with CSS position: relative of the child elements.

CASE 1: Resetting the Transparency of the Child Elements:

HTML:

<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras purus pede, aliquam vel, eleifend in, mollis sit amet, ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempor. Ut pretium. Donec libero turpis, viverra ac, pharetra vel, rutrum ut, pede. Proin vulputate diam a libero. Donec nec turpis. Integer purus. Proin ipsum risus, tempus scelerisque, tempus et, commodo quis, diam. Cras pulvinar urna ac erat. Aliquam pulvinar gravida justo.</p>
</div>
</div>

CSS:

<style type="text/css">
.parent
{
width: 640px;
height: 480px;
border: solid 1px #333;
background: #ccc;
filter: alpha(opacity=30);
}

.child
{
width: 600px;
height: 440px;
border: solid 1px #333;
background: #ccc;
margin: 20px;
position: relative;
}
</style>

To reset the opacity rate of the children elements we simply add position: relative to them.

CASE 2: Setting a Different Transparency of the Child Elements:

Reuse the above code, just add the new filter value to the .child class, i.e:

<style type="text/css">
.child
{
width: 600px;
height: 440px;
border: solid 1px #333;
background: #ccc;
margin: 20px;
position: relative;
filter: alpha(opacity=80);
}
</style>

Enjoy!

Visit http://acidmartin.wemakesites.net – the home of Acid.JS – The AJAX Tools and Widgets Library