CSS не применяется к элементу

Я посмотрел на другие вопросы, и ничего не работает. У меня есть DIV, который должен создать всплывающее окно, а другое - сделать серый. Я использовал тот же подход на другой странице, и он отлично работает, однако на этой текущей странице CSS не применяется ни к одному из тегов DIV. Вот HTML

<section id="goals" class="goals">
    <button id="addgoal" onclick="popupadd(); return false;">Add Goal</button>

    <div id="darkLayer" class="darkl" style="display:none"></div>       
    <div id="addgoalpop" class="agpop" style="display:none">

        <p><span class="">LogIn</span></p>
        <P><span class="title">Email</span> <asp:TextBox runat="server" ID="emailbox"></asp:TextBox></P>
        <P><span class="title">Password</span> <asp:TextBox runat="server" ID="passbox" TextMode="Password"></asp:TextBox></P>
        <p><Label id="errormsg"></Label></p>           

    </div>   
</section>

Вот CSS, который должен применяться к обеим тегам DIV

.agpop {
    padding:10px 10px 35px;
    text-align:center;
    vertical-align:middle;

    border:solid 1px black;
    position:absolute;
    left:50%;
    top:50%;
    background-color:white;
    z-index:100;

    height:150px;
    margin-top:-200px;

    width:200px;
    margin-left:-100px;
}

.darkl {
    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;
}

Используемый JavaScript

   function popupadd()
   {
      document.getElementById("addgoalpop").style.display = 'block';
      document.getElementById("darkLayer").style.display = "";
   }

Может ли кто-нибудь понять, почему это так?