title: on submit form span message changes position why?
body: <p>I'm trying to understand why the message generated by jquery it's changing position everytime a field gets empty!</p>
  
  <p>So, if the message is generated by the feedback of ajax it's placed in the proper place which is right beneath the login box. If the field (input box) is empty on submit the ajax script is not called and the message of empty field it's shows right on but 40px or more beneath.</p>
  
  <p>The jquery script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
                          &lt;!--
                          $(document).ready(function(){
                              $("#loginform").submit(function(){
  
                                  $('#loginform input[type=text]').each(function(n,element){  
                                      if ($(element).val()=='') {
                                          $(".message").html('&lt;p&gt;O campo '+element.id+' tem de ter um valor!&lt;/p&gt;').fadeIn("slow").delay(2000).fadeOut(1000);
                                          return false;  
                                      } 
  
                                      else{
                                          $.post("login.php", { usrname:$("#Nome").val(), passwd:$("#Palavra-passe").val()}, function(data){
                                              if(data == '1'){
                                                  $("#subLog").hide();
                                                  $(".message").html('&lt;p&gt;Login efectuado com sucesso, a redirecionar...&lt;/p&gt;').fadeIn("slow").delay(2000).fadeOut(1000, function (){
                                                      $("#login").fadeOut('slow', function(){
                                                          location.reload();
                                                      });
                                                  });
                                              }
                                              else{
                                                  $("#subLog").hide();
                                                  $(".message").html('&lt;p&gt;Erro! Tente novamente por-favor!&lt;/p&gt;').fadeIn("slow").delay(1500).fadeOut(1000, function(){
                                                      $("#subLog").fadeIn('fast');
                                                  });
                                              }
                                          });
                                      }
                                  });
                                  return false;
                              });
                          });
                          //--&gt;
                          &lt;/script&gt;
  </code></pre>
  
  <p>The css message style:</p>
  
  <pre><code>.message{
      text-align:center;
      color: white;
      background: rgba(0, 0, 0, .5);
      margin-top: 65px;
      padding: 4px;
      font-weight: bold;
      font-size: small;
      border: 2px solid white;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      -khtml-border-radius: 6px;
      border-radius: 6px;
  }
  </code></pre>
  
  <p>the form:</p>
  
  <pre><code>&lt;div class="box" id="login" style="width: 326px; height: 228px; top: 39%; background-image: url('images/loginBox.png');background-repeat: no-repeat;"&gt;
  
  &lt;form id="loginform" action="" method="post"&gt;
  
      &lt;fieldset style="display: block"&gt;
          &lt;legend&gt;&lt;/legend&gt;
              &lt;input id="Nome" class="transparent" type="text"&gt;
          &lt;input id="Palavra-passe" class="transparent" type="password"&gt; 
          &lt;input id="subLog" type="submit" value="Login"&gt;
      &lt;/fieldset&gt;
  
  &lt;/form&gt;
  
  &lt;div class="message"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>UPDATE:</p>
  
  <p>The submit button get's hidden when the ajax instruction is called therefore the position changes 65px. To correct this small problem I have removed the margin-top property from the css rule and changed the position with .css('margin-top', 'value'). This way I change the value to the different messages and both get displayed in the same screen position. Thank you.</p>