How do I stop Internet Explorer's opacity filter being inherited?

The trick is to force IE to adopt the current style. There are a couple of tricks to make it do that but the one I tend to use is position: relative; although you should make sure that this doesn't affect your layout in other browsers.

So use something like:

quote:

---

body {
background-color: #fff;
}

#mainDiv {
background-color: #c0c0c0;
filter: progidXImageTransform.Microsoft.Alpha(opacity=20);
height: 500px;
width:100%;
}

#nestedDiv {
position: relative;
filter: progidXImageTransform.Microsoft.Alpha(opacity=100);
height: 250px;
width:100%;
}

---

on something like:

quote:

---

<div id="mainDiv">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. <br />

<hr />

<div id="nestedDiv" >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. <br />
</div>
</div>

---

-------------------------------
Relevant threads:

"Uninheriting" styles?

_______________________
Emperor

(Added by: Emperor on Tue 25-Feb-2003)

(Edited by: Emperor on Tue 25-Feb-2003)