Programming Forums - Div problems (javaScript)

Hello,

I have a function to display small divs next to each field that failed my validation tests. And I have a larger one that floats on top of the form saying error... the user can click a button to hide that large error message div, but for some reason when they do so, it re-loads the page and the other divs are also hidden...

The div:

 <div id="err_div" style=" left: 177px; width: 292px; position:relative; top: -472px; background-color: White; height: 131px; visibility:hidden; border-style:dashed;  border-width: thin; border-color: Black; visibility:hidden; ">

     

               <div style="padding-left: 5px; background-image:url(/resources/div_bg.gif); border-bottom-style:solid; border-bottom-width:thin; border-bottom-color: Black; ">

                <font face="arial" size="4" color="black"> Error !</font>

                </div>

                

                <div style=" padding:5px;" >

                   <font face="verdana" size="2" color="black"> <br />Sorry, some fileds were not filled in.</font>    



<asp:Button ID="Button1" runat="server" Text="Ok" BackColor="Gray" BorderStyle="None" CausesValidation="False" ForeColor="White" Width="35px" onclientclick="hideAgain('err_div')" />

</div>

           </div>

The Code:

function hideAgain(divName)

    {

       var the_div = document.getElementById(divName);

       the_div.style.visibility="hidden";

    }