Sol
17 Mar 2010, 05: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
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