Different Opacity layer, over another opactiy layer

Hello,

in a Stylesheet, I have this:

    #bg
    {
        background-color:#ffffff;
        filter:alpha(opacity=40);
        border:#B5A09B 1px solid;
        width:760px;
        height:400px;
        margin:0px;
        text-align:left;
    }

    #content_strip
    {
        background-color:red;
        float:left;
        filter:alpha(opacity=90);
        width:160px;
        height:400px;
        margin:0px;
        text-align:left;
    }


In the index.html page, I'm doing this:

<div id="bg">
    <div id="content_strip">
        ...
    </div>
</div>

Now, I want the layer 'content_strip' to be 90% opacity (as specified in the stylesheet), however, it is automatically adapting the 40% opacity of it's super-layer ('bg').

How can I draw a unique opacity layer on top of another?

Kind Regards;
LVL 25
InteractiveMindAsked:
Who is Participating?
 
GrandSchtroumpfCommented:
In IE, the opacity is not inherited by child elements that have "position: relative".
So, adding this rule should solve the problem:

    #content_strip
    {
        position: relative;
    }
0
 
StormyWatersCommented:
Actually it's becoming 90% of 40%, which is 36%. I personally know of no way to fix this.

Is there a reason for having a transparent "bg" div with just a white background. Why not just leave it solid?
0
 
COBOLdinosaurCommented:
The opacity is cumulative.  At least that is the case when the elements are nested an therefore inherit from the cascade.  

What you could try is taking the nested div out of the parent and then float it on top with absolute positioning and a z-index.  The effect might till be cumulative but it is worth a try.  With these not standard gee whiz things you can never predict how they will turn out anyway.

Cd&
 
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.