Child DIVS Not Losing Opacity with Rest of Div in IE. Fix?

When I drop the opacity on a particular div layer, all the elements including text and other div layers inside it drop with it. As I would expect. The only problem is that in Internet Explorer, the DIV layers and relative-positioned images inside the parent div with the lowered opacity are not dropping in opacity also.

Is there a fix for this so everything has the same opacity in IE?

Thanks
Ryan

Hi,

In IE position:relative cuts off the opacity from that element onwards so you would need to remove position:relative and move the elements by other means.

If you must have position:relative then you could re-state the opacity on the relative element but that results in different colours than before.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap {
    width:300px;
    height:300px;
    filter:Alpha(Opacity=40);
    -ms-filter: "Alpha(Opacity=40)";
    opacity:0.4;
    background:red;
    border:1px solid #000;
}
p {
    width:200px;
    height:200px;
    background:yellow;
    margin:20px;
    position:relative;
    filter:Alpha(Opacity=70);
    -ms-filter: "Alpha(Opacity=70)";
}
</style>
</head>
<body>
<div class="wrap">
<p>Testing opacity</p>

</div>
</body>
</html>


If you are using a filter for opacity then elements will need Layout. Try giving layout to those inner elements and see if the opacity works as expected.

It could also be that position: relative; is removing it from the natural hierarchy in IE. It would be good to see an example.

here is the div and child elements:


<div style="text-align:left; line-height:1.6em; background-color:#FFFFFF;" id="friendactivity">

<li class="notificationslist"><a href="" style="display:block; min-width:60px; float:left;"><img src="/images/usr/statusdot-offline.png" class="statusdot" alt="Offline" border="0" /> sweetnothing</a> <div class="useractivities"><a href=""><img src="/images/usr/icon-comment.png" border="0" alt="Read Last Comment" title="Read Last Comment" /></a><a href="/trailer/kick-***/teaser-trailer"><img src="/images/usr/icon-favorite.png" border="0" alt="View Last Favorite" title="View Last Favorite" /></a></div> <br /> <div style="width:408px; padding-left:20px; font-size:8pt; clear:left;">- Last Watched: <a href="/trailer/the-spy-next-door/spanish-tv-spot">Spanish TV Spot</a> from <a href="/tags/the-spy-next-door">The Spy Next Door</a></div></li>

</div>

The <div class=“useractivities”> has a background image that doesn’t fade, nor the images in that div. Also, the float:left images don’t fade with the parent div either.

Thanks
Ryan

Well, crap.

So I’m assuming float: left; automatically counts as relative? As my floats aren’t working either.

Ryan

No, float does not change the position value.

No as Mark said floats won’t cut off the opacity (unless they are in a parent element set to position:relative of course).

You should be able to move the elements around without using position:relative but we’d need to see a full example to test :slight_smile:

I forgot to mention that for ie6 and ie7 also adding position:relative to the element that has the opacity rule applied to will restore the opacity effect to the positioned child. It doesn’t work in IE8 though so is not much use.