Le bouton de soumission ne s'aligne pas avec deux zones de saisie dans une table

Question

Il s'agit généralement d'une tâche simple. J'ai un formulaire de connexion simple qui a une entrée e-mail, une entrée de mot de passe, et un bouton de soumission, le tout dans une ligne horizontale. Après des heures et des heures à retirer des styles et à essayer différentes structures, le bouton se trouve un peu plus bas que les cases. Je pense que ce pourrait être parce que j'ai absolument positionné des éléments impliqués ou que c'est «assis dans un div qui a une image de fond.

Merci d'avance.

Voici la capture d'écran:

Voici la structure html:

<div id="new_home_join"> 
    <div id="sign_up_home"> 
     <div id="sign_in_table"> 
     <form name="sendEmail" action="Home.php" method="post"> 
     <table> 
     <tr> 
      <td class="sign_in_input"> 
      <input type="text" name="email" class="text" value="Email<?php if($formError == "true") { echo stripslashes($_POST['name']); } ?>" onclick="clearify(this);" /> 

      </td> 
      <td class="sign_in_input"> 
      <input type="password" name="password" class="text" value="Password<?php if($formError == "true") { echo stripslashes($_POST['']); } ?>" onfocus="clearify(this);" /> 
      </td> 
      <td class="sign_submit"> 
      <input type="hidden" name="return" value="<?php echo $_GET['return']; ?>" /> 
      <input type="submit" name="subSignIn" value="Login" /> 

      </td> 
     </tr> 
     </table> 
     </form> 
     <div class="forget_pw"> 
     <a href="password_forget.php"> 
      Forgot Password? 
     </a> 
     </div> 
     </div> 

     <div id="not_member"> 
     <a href="http://www.cysticlife.org/signUp.php"> 
     <span style="color:#808080;font-size:18px;">Not a CysticLife member?</span><br /> Join our community today! 
     </a> 
     </div> 
     <div id="browse"> 
     or just browse the 
     <a href="http://www.cysticlife.org/Blogs_future.php">blogs</a> and <a href="http://www.cysticlife.org/Questions_future.php">questions</a> 
     </div> 
     </div> 
     <div id="fuss"> 
     <a href="http://www.cysticlife.org/what-is-cysticlife.php">What is the CysticLife community?</a> 
     </div> 
    </div> 

et voici le css pertinent:

#new_home_join {background:url(images/join_today.png) no-repeat;width:333px; height:200px;margin:0px 0px 0px 0px;} 

#sign_up_home {width:343px;} 

#sign_in_table {width:338px;margin:0px auto 0px auto;position:relative;} 

#sign_in_table {width:338px;margin:0px auto 0px auto;position:relative;} 

#sign_in_table table tr td.sign_in_input {padding:40px 0px 5px 10px;} 

#sign_in_table table tr td.sign_in_input input {width:105px; border:1px #999999 solid;padding:2px;font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#666666;} 

#sign_in_table table tr td.sign_submit input{width:72px; height:34px; background:url(images/search_button.png) no-repeat; font-style:Arial,Helvetica, sans-serif; color:#333333; font-size:11px;padding:5px 0px 10px 0px; border:0;} 


.forget_pw {margin:5px 0px 0px 0px;position:absolute; top:62px; right:82px;} 

.forget_pw a {padding:10px;font-family:Arial,Helvetica, sans-serif; font-size:10px; color:#626262; text-decoration:none;} 

.forget_pw a:hover {color:#F37336;} 

#sign_in_table table tr td.sign_submit input{width:72px; height:34px; background:url(images/search_button.png) no-repeat; font-style:Arial,Helvetica, sans-serif; color:#333333; font-size:11px;padding:5px 0px 10px 0px; border:0;} 

#join_us {margin:0px auto 40px 60px; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#F37336; font-weight:bold; text-align:left;padding:0px 50px 80px 0px;float:right} 

#join_us a {font-family:Arial,Helvetica, sans-serif; font-size:14px; color:#999999;text-decoration:none;} 

#join_us a:hover {color:#F37336;} 

#fuss {margin:25px auto 0px auto; font-family:Arial,Helvetica, sans-serif; text-align:center; color:#666666; font-size:12px;} 

#fuss a {font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#666666; text-decoration:none;} 

#fuss a:hover {color:#FF4701;} 

Answer 1

Quelques choses que je remarqué:

#sign_in_table table tr td.sign_in_input { ... } 

#sign_in_table table tr td.sign_in_input input { ... } 

#sign_in_table table tr td.sign_submit input{ ... } 

1. Vous pouvez simplifier . Ces sélecteurs sont trop compliquées et ralentissent à la fois le rendu de la page et la lecture du code (voir Writing Efficient CSS):

.sign_in_input { ... } 
.sign_in_input input { ... } 
.sign_submit input { ... } 

La volonté ci-dessus faire la même chose que votre code. De plus, cela ne dépend pas de la structure HTML.

2. Lorsque l'on regarde les propriétés, je remarque que toutes les cellules de table ont un rembourrage différent:

.sign_in_input {padding:40px 0px 5px 10px;} 

.sign_submit { /* No rules, just a default padding */ } 

Vous devez vous assurer le remplissage vertical est le même:

.sign_submit { padding-top: 0px; padding-bottom: 0px; } 

3 Le bouton d'envoi a une hauteur définie mais pas les entrées. Si la hauteur est supérieure à la hauteur des entrées, il est nécessaire d'aligner verticalement à milieu:

.sign_submit { line-height: 34px; /* = Height of the input */ vertical-align: middle; } 
.sign_in_input input { height: 30px; /* Better specify the height of the input fields as well*/ /* ... */ } 

4. Assurez-vous que l'image du bouton soumettre n'a pas une bande blanche/transparente sur le dessus.

5. Assurez-vous que vous définissez toutes les marges d'entrée verticales à 0:

.sign_submit input { margin-top: 0px; margin-bottom: 0px; } 

6. Essayez de déplacer le champ de saisie caché après le bouton d'envoi. Ne devrait rien changer mais qui sait :)

7.Si aucune des aide ci-dessus, vous pouvez également utiliser un hack marge négative (mais ce n'est pas vraiment une bonne solution):

.sign_submit input { margin-top: -5px; } 

8. Vous arrive d'avoir la règle pour .sign_submit entrée en double. Enlevez l'un d'eux pour éviter de suivre les erreurs.

9. En regardant votre code PHP, je remarque que vous intégrez directement le contenu de $ _GET à la page. Ceci est considéré comme dangereux et vous devriez toujours le désinfecter en utilisant htmlentities pour éviter XSS.

EDIT:

Après avoir regardé sur le site, en changeant simplement le vertical-align de .sign_submit en bas résout le problème dans mon navigateur Opera:

.sign_submit { vertical-align: bottom; /* Instead of middle */ } 

Answer 2

Ajouter vertical-align: bottom à td.sign_submit. Il est actuellement défini sur baseline dans global.css. Après cela, vous devrez peut-être ajouter quelques pixels de remplissage supérieur pour obtenir le positionnement exactement correct, cependant.

Edit:

On dirait que vous aurez besoin d'une nouvelle règle pour que:

#sign_in_table table tr td.sign_submit { vertical-align: bottom; }