CSS not working from javascript call

[while(!success)]

Hi guys,

I have an ImageButton control in asp.net calling a javascript function to display it in block. The elements have their own css classes, but they do not appear in the context that I gave them. I am assuming this is a problem with my css because the javascript function makes my div's appear and disappear as wanted. But just for the sake of being thorough, here is all the related markups:

The ImageButton control:

<asp:ImageButton ID="ImgBtn" runat="server" ImageUrl="~/Images/Go.gif" 
                OnClientClick="<script type='text/javascript'>document.getElementById('infoSharing').style.display='block';document.getElementById('fade').style.display='block';return false;</script>" />

Here are the div's that are supposed to appear in a certain style:

<div id="fade" class="black_overlay"></div>

<div id="infoSharing" class="white_content2">
    <h2>BLahb blah</h2>  
    <p>ajfkjsdfklsjkfljalkjdfsfsaasdfasdfsdfasftjee5uteagasdfsadfBlahblahblahblah
     <a href="http://www.website.com" target="_blank">here.</a></p>
    <a href="javascript:void(0)" onclick="document.getElementById('infoSharing').style.display='none';document.getElementById('fade').style.display='none'">Close This Window</a>
</div>

And finally here is the CSS:

.black_overlay {
    display: none;
    position:absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
}


.white_content2 {
    display: none;
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 15%;
    padding: 10px;
    border: 5px solid black;
    background-color: white;
    z-index: 1002;
    overflow: auto;
}

.
#infoSharing {
    text-align: center;
}

#infoSharing h2 {
    color: #000000;
}

[AleMonteiro]

What do you mean by "they do not appear in the context that I gave them"? I didn't understand your problem.

[while(!success)]

Sorry for being unclear.

What I mean is that the javascript is correctly setting the display of the div's to 'none' or 'block.' When the div is actually being displayed, however, it isn't being styled with the classes I gave them. They aren't being styled at all. I was wondering why that was happening and how do I fix it?

[AleMonteiro]

None of the styles are being applyed? If so it may be a wrong reference to the css style sheet.

To verify this type of problem you can use this steps in any browser debugger(FireBug or Developers Tools in example):
1. Check if the CSS file was downloaded (in the Network tab)
2. Check if the CSS file was loaded correctly (in the styles tab)
3. Check if the element has the css class applied to them (in the HTML tab use the tool Insepect Element and click at it)

If the css style is at the same file that the JS and HTML, then open the console and check if there's any erros thrown.

Hope it helps.

[JorgeM]

Without having the asp.net code (i noticed you included an imageButton control), I would tend to also think it could be related to how you are referencing the stylesheet.

However, as a note, while you have javascript included here, you are still going to have a postback because the imageButton is rendered as an input element within a form. I assume that is why you included a return false in the javascript portion. Is there anything else missing that may be revelant from your code?