Opacity Css Affecting Children Elements

I am trying to implement an error message when user has disabled javascript. I have created a jsfiddle for my current work. I have 2 div layers one covering the whole page and an a

Solution 1:

Just move the message outside of the faded container ...

From:

<div id="fadeMe">
    <div id="center">You have javascript disabled.</div>
</div>

To:

<div id="fadeMe">
</div>
<div id="center">You have javascript disabled.</div>

http://jsfiddle.net/xcPcv/7/

Solution 2:

Instead of opacity, use rgba(0,0,0,.75) for the background:

http://jsfiddle.net/xcPcv/9/

Solution 3:

The issue is that opacity applies to all contained (child) elements, not just the element you are applying

    opacity

to. A side effect of this is that a further opacity setting will be that fraction of the parent opacity.

In your case you need to do nothing else but move the popup div outside the fadeMe div

    <div id="fadeMe"></div>
    <div id="center">You have javascript disabled.</div>