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?
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.