divs are not hidden when buttons are there, why?
<p>here's my code</p>

<pre><code> if(userid == ""){
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height: 230,
        width: 350,
            modal: true,
            buttons: {
                "Register": function(){
                    $(this).dialog("close");
                $('div#registerpopup').dialog({
                   resizable: false,
                   height: 485,
                   width: 420,
                   modal: true,
                   buttons: {
                      "Register" : function(){
                        var valid = true;
                        valid = valid &amp;&amp; checkLength(username,"Username",1,30);
                        valid = valid &amp;&amp; checkPassword(password,"Password",7,);
                        valid = valid &amp;&amp; checkRetype(password,retypepassword);
                        valid = valid &amp;&amp; checkRegexp(emailaddress,emailRegex,"Emailaddress");
                        valid = valid &amp;&amp; checkSecretquestion(secretquestion,"Secret Question");
                        valid = valid &amp;&amp; checkSecretquestion(secretanswer,"Secret Answer");
                        if(valid){
                          $.ajax({
                             type: "POST",
                             url: "classes/ajax.registerpopup.php",
                             timeout: 8000,
                             data: "username="+username+"&amp;password="+password+"&amp;emailaddress="+emailaddress+
                                  "&amp;secretquestion="+secretquestion+"&amp;secretanswer="+secretanswer,
                             success: function(){
                                alert("you are registered now");
                             }
                          });
                          return false;
                        }
                      }
                   }
                });
                },
                "Log in": function() {
                    $(this).dialog("close");
                $('div#loginpopup').dialog({
                  resizable: false,
                  height: 230,
                  width: 350,
                  modal: true
                })
                }
            }
        });
    return false;
 }
</code></pre>

<p>this is the supposedly hidden div</p>

<pre><code>&lt;div id="dialog-confirm" title="Register OR Login"&gt;
    &lt;p&gt;Before you can submit your cv,&lt;br /&gt;please log in or register,registering only takes 2 seconds
    and you will not lose the information you have entered.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>and</p>

<pre><code>          &lt;div id="registerpopup" title="Register" class="form" style="background: #F0F0F0;"&gt;
                &lt;p class="validateTips"&gt;All form fields are required.&lt;/p&gt;

                &lt;form&gt;
                  &lt;table&gt;
                    &lt;tr&gt;
                     &lt;td&gt;&lt;label&gt;Username&lt;/label&gt;&lt;/td&gt;
                     &lt;td&gt;&lt;input type="text" name="username" id="username" size="12"/&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                     &lt;td&gt;&lt;label&gt;Password&lt;/label&gt;&lt;/td&gt;
                     &lt;td&gt;&lt;input type="password" name="password" id="password" size="10" value=""/&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                     &lt;td&gt;&lt;label&gt;Re-type Password&lt;/label&gt;&lt;/td&gt;
                     &lt;td&gt;&lt;input type="password" name="retypepassword" id="retypepassword" size="10" value=""/&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                     &lt;td&gt;&lt;label&gt;Email Address&lt;/label&gt;&lt;/td&gt;
                     &lt;td&gt;&lt;input type="text" name="emailaddress" id="emailaddress" value=""/&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                     &lt;td&gt;&lt;label&gt;Secondary Email Address&lt;/label&gt;&lt;/td&gt;
                     &lt;td&gt;&lt;input type="text" name="secondaryemailaddress" id="secondaryemailaddress" value=""/&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                    &lt;td&gt;&lt;label&gt;Secret Question&lt;/label&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input type="text" name="secretquestion" id="secretquestion" value="" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                     &lt;td&gt;&lt;label&gt;Secret Answer&lt;/label&gt;&lt;/td&gt;
                     &lt;td&gt;&lt;input type="secretanswer" name="secretanswer" id="secretanswer" value=""/&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                    &lt;td&gt;&lt;label&gt;Reff. Code&lt;/label&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input type="text" name="reffcode" id="reffcode" value="" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/table&gt;
                &lt;/form&gt;
          &lt;/div&gt;
</code></pre>

<p>now my question is, why is it that the supposedly hidden divs appear when I placed the buttons param of the $('div#registerpopu).dialog({}) ? , but when the buttons are not there, the divs are hidden,,did I miss something ?</p>
