2

Normally I try to document the issue here well enough, and duplicate some of the code, so that when the URL that I link to to demonstrate the problem no longer leads anywhere, at least the question will have enough code in it so that someone reading this much later who might have the same problem can see the example. But in this case, the issue I'm having is so specific... I don't know what's wrong, so I don't know what code to duplicate here.

I have a div, with an opacity set to 1, inside another div with an opacity set to .5, to make a really cheap "lightbox" effect. I've done this exact thing at least on two other sites, in the exact same way, and never ran into this problem. In fact if I open up a new HTML page in Dreamweaver and try to duplicate the issue, I can't. I know I must be overlooking something so ridiculously simple, but...

The offending URL in question is http://pmind.com/staging/123/dashboard.shtml

The white box in the middle, generate_window, is inheriting its parent's (generate_window-wash) opacity.

Why?

2

3 Answers 3

5

The parent <div>, including everything inside of it, is transparent.

You cannot have an opaque element inside of a transparent one.

Instead, you can position the opaque <div> above the transparent one, without being a child.

3
  • Maybe concurrent nights of going away parties for friends is finally taking it's toll on my brain. I kept looking at the previous work I'd done and this thinking, "There's literally no difference!" Nov 12, 2010 at 15:47
  • Except, of course, for the fact that in the other times, I immediately closed the wash div, instead of nesting anything in it. Nov 12, 2010 at 15:48
  • 1
    The toll could also be psychological, from all your friends leaving you suddenly. ;)
    – Ben
    Jan 16, 2013 at 2:31
3

All child nodes of an element with opacity inherit that opacity. That is by design.

You need to re-arrange your HTML so the item is not a child but occupies the same position.

0

It is not inheriting from its parents..I saw in the firebug it shows the following properties:

#generate_window {
background:none repeat scroll 0 0 #FFFFFF;
height:400px;
margin:200px auto;
opacity:1;
position:relative;
width:500px;
z-index:2000;
}
1
  • @opacity 0.5 has been overwritten..and striked out , i saw the same in firebug.
    – kobe
    Nov 12, 2010 at 15:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.