Change Opacity of DIV Layer and EVERYTHING Inside It

HTML & CSS
1

I have a div layer that I change the opacity of with javascript.

In firefox, the entire div layer and all the inner divs/content drops in opacity.

In IE, only the div layer itself (basically the background) and nothing else drops in opacity.

I want everything inside the div layer losing opacity to lose it also in IE.

What am I missing?

Thanks
Ryan

2

if you are using javascript then try asking in javascript section but do add your javascript code in the post.

vineet

3

Hi, opacity applied on a container applies opacity to the children as well. There is no way to reverse opacity for the children

Check out quiz 20 which demonstrates on how to workaround this :).

4

Actually, that’s the opposite of my problem. Opacity being applied (through javascript) is NOT being applied to the children, but for some reason only the container in IE. Firefox is fine.

Here is the javascript:

document.getElementById(‘entirecomments’).style.opacity = “.1”;
document.getElementById(‘entirecomments’).style.filter = “alpha(opacity=10)”;

obviously that is the id of the container div I want to lose opacity, along with everything inside it.

Thanks
Ryan

5

Hi, if you want it to be applied to the children why not do it in CSS? I don’t know why it isn’t working in javascript since this isn’t the javascript forum.

6

Okay,

Just to make this a CSS question then, I did a test.

I added this to the div style of the parent div:


<div style="width:580px; text-align:left; margin-top:6px; background:url(/images/usr/watchnow.png) 416px 75px repeat-y; opacity:0.4; filter:alpha(opacity=40)" id="entirecomments">
<img src="/images/usr/comments.png" alt="Comments" />
<!-- child divs/content here -->
</div>

Now, everything inside that div should be opacity .4, correct? Well, in IE, the first image drops in opacity, but the rest of the divs are still showing without any transparency at all. Inner Div layers are not reacting. Fine in FF.

Ryan

7

Since IE doesn’t support the opacity property and uses a proprietary filter property, the probable cause is that filter is not inherited by descendant elements.

Therefore I suspect that you need to iterate over all descendants and set the filter explicitly for each one. But that’s a JavaScript issue, not a CSS issue.

8

Hi,

The code you specified above works fine for me in IE and all children get the opacity (it is not actually inherited as such but the whole parent and children are first rendered then opacity is applied as a whole).

In IE however adding position:relative to a child element will stop the opacity from affecting the child element and is just another strange IE only quirk.

It seems that you may have in your code (not shown to us) set the child to position:relative. Remove the position:relative (if possible) and the whole contents will be opaque :slight_smile: