PDA

View Full Version : Inherited Opacity problem in FF & Chrome



Sol
17 Mar 2010, 04:51 AM
Hi guys, i thought i had published this post yesterday but i can't find it, so i apologise if it's actually somewhere out there in the ether.

So, the problem i'm experiencing is to do with nested divs and the opacity setting in CSS.

If i set the parent div to have 0.5 then the child div inherits it, that's fine if that is the desired affect i'm after but i'm not...

So i explicitly declare the child div to have opacity 1.0; but this has no affect.

Oh and the strange thing is that in IE with the filter: alpha(opacity) setting in the CSS it works perfectly...

It seems the only way i can get around this is by not nesting the divs, but this ruins my layout.

Here are a couple code snippets.

HTML:


<body>
<div id="wrapper">
<div id="animContainer">
<div id="sun">
<div id="clouds1">
<div id="clouds2">
<div id="mountains">
<div id="robot">
<div id="robotHead"></div>
</div>
</div>
</div>
</div>
</div>
<div id="ground"></div>
</div>

<div id="footer"></div>
</div>

</body>


CSS:


#clouds1
{
position:relative;
background-image:url(../images/clouds1.png);
background-repeat:repeat-x;
height:215px;
/*top:-150px;*/
margin:0px;
padding:0px;
filter: alpha(opacity=70);
opacity:0.5;
}

#clouds2
{
position:relative;
background-image:url(../images/clouds2.png);
background-repeat:repeat-x;
height:150px;
/*top:-365px;*/
margin:0px;
padding:0px;
filter: alpha(opacity=50);
opacity:0.5;
}

#mountains
{
position:relative;
background-image:url(../images/mountain.png);
height:220px;
bottom:-410px;
filter: alpha(opacity=100);
-moz-opacity:1;
}


I hope someone can help as this is driving me insane.

Thanks in advance.
Sol

Sol
17 Mar 2010, 04:55 AM
Sorry i found my old post.

For anyone looking for an answer to this please go here:
http://www.webdevforums.com/showthread.php?t=35997

Sol