CODEWITHSUNDEEP
jquerycssinternet-explorerfilteropacity
matteok
matteok

Reputation: 2199

IE 7 - when opacity is set for DIV with position absolute it's child divs disappear

I have a div with position set to absolute and a few divs inside of that. As soon as I add an opacity filter to that div even if opacity is set to 100 the child divs disappear in IE7.

The same thing happens if I change the opacity via jQuery even without position absolute.

Does anybody know a fix?

Thank you in advance

Example

<style type="text/css">

#wrap {
opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(Opacity=50); -moz-opacity: 0.50; -khtml-opacity: 0.5;
position:absolute;
}
#sub1 {
position:absolute;
width:200px;
height:200px;
background-color:#F00;
}

</style>

<div id="wrap">
    <div id="sub1"></div>
</div>

If wrap has opacity and position absolute, sub1 is invisible in IE7

Second scenario:

#wrap {
    position:absolute;
    width:500px;
    height:500px;
    color:#fff;
    filter: alpha(Opacity=100);
}
#sub1 {
    position:absolute;
}
#sub2_bg {
    width:500px;
    height:500px;
    background-color:#000;
    position:absolute;
    filter: alpha(Opacity=50);
}
#sub2_text {
    position:absolute;
}
</style>

<div id="wrap">
    <div id="sub1">
       <div id="sub2_bg"></div>
       <div id="sub2_text">sample text</div>
    </div>
</div>

In that scenario the text "sample text" inside sub2_text has an alpha transparency of 50% as soon as wrap has a filter even if it is opacity=100. Obviously I could remove alpha(opacity=100) but the same problem appears when I animate the opacity of wrap to .5 and back up to 1, because then the div gets a filter. I noticed that only the parts that have an alpha transparent div below that have this issue, if the text was larger than sub1_bg only the parts on top of sub1_bg would be affected. Again only in IE 7.

Would be nice if someone could show me a fix for that too. Thank you.

Upvotes: 1

Views: 2052

Answers (1)

scottheckel
scottheckel

Reputation: 9244

The reason is because the #wrap is now no longer containing your absolute positioned element. You should specify a width/height on it like the following.

#wrap { 
  width:500px;
  height:500px;
}

Previously #wrap wasn't cutting that content off, but when you applied the filter it cuts that content off. It's like sticking an overflow:hidden on your #wrap.

Update: To fix this set a strict doctype on your page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Also, add the following to the CSS for your children to inherit the previous filter style of the opacity 50%.

filter:inherit;

Upvotes: 1

Related Questions