CODEWITHSUNDEEP
xhtmlcss
fmsf
fmsf

Reputation: 37147

Transparent div problem

Hey i have this div that shows as a popup:

<div class="popup">
</div>

Then with jquery i add another class to it to give it with the css associated to that class, position, size, color and transparency:

.show {
    position: absolute;
    color: #F4F5F6;
    width: 600px;
    margin-left: -300px;
    height:300px;
    background: #000000;
    left:50%;
    top:200px;

    filter:alpha(opacity=95); 
    -moz-opacity: 0.95; 
    opacity: 0.95;
}

My problem is this:

I'm adding text and image to the div.

ending up like: 

<div class="popup show">
    <div class="image">
      <img scr="blabla.png">
    </div>
    <div class="text">
      ble ble ble
    </div>
</div>

My problem is the following, even though i have overriden the opacity here:

div.image
{
    position: relative;
    float:left;
    width:202;
    height:402;
    filter:alpha(opacity=100); 
        -moz-opacity: 1; 
        opacity: 1; 
}

The image still apears with transparency.

Is there anyway to override the opacity values without having to put the image div outside of the popup div?

Upvotes: 0

Views: 3352

Answers (2)

Andy Ford
Andy Ford

Reputation: 8490

Since the '.show' class has an opacity of 95%, so will all of its descendants. It's unfortunate, but that's how opacity works. The descendants cannot overcome their ancestor's opacity as long as they still truly remain descendants.

You'll have to either set the '.show' background with a semi-transparent png or result to some awkward html (see: Non-Transparent Elements Inside Transparent Elements)

Not trying to be jerky, but this Google search (or something similar) might help

Upvotes: 2

Rob Grant
Rob Grant

Reputation: 7358

Try this:

div.image
{
position: relative;
float:left;
width:202;
height:402;
filter:alpha(opacity=100) !important; 
    -moz-opacity: 1 !important; 
    opacity: 1 !important; 
}

http://www.w3.org/TR/CSS2/cascade.html#important-rules

EDIT: sorry; I've even come across this before and didn't twig. I think that the nested element's maximum opacity is the same as the outer element's opacity; you can never get more opaque than your parent element! Last I checked this is a proper CSS issue, and I don't know a workaround.

As a workaround, you could try not making nested, but use some ucnning positioning trickery.

Upvotes: 2

Related Questions