I am greying out a web page when a user doesn't have permission to access it. In order to do that, I am placing a div with background-color white and a lowered opacity on top of the web page. I want to write some words in that div with the words having a normal opacity.
As of now, the greyed out
background is showing correctly. However, I can't seem to get the words to be a regular opacity. The derived styles on Firebug show the opacity on the words as normal, but it clearly isn't.
What am I doing wrong?
The HTML:
<div class="noPermission">
<p>I'm sorry. You do not have permission to access this page.</p>
</div>
The CSS:
div.noPermission {
background-color: white;
filter:alpha(opacity=50); /* IE */
opacity: 0.5; /* Safari, Opera */
-moz-opacity:0.50; /* FireFox */
z-index: 20;
height: 100%;
width: 100%;
background-repeat:no-repeat;
background-position:center;
position:absolute;
top: 0px;
left: 0px;
}
div.noPermission p{
color: black;
margin: 300px auto auto 50px;
text-align: left;
font-weight: bold;
font-size: 18px;
display: block;
width: 250px;
}
