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:
Code:
<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:
Code:
#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
Reply With Quote
Established Member
Posting Permissions