le bouton d'envoi n'alignant peu importe avec deux boîtes d'entrée dans une table

Question

Ceci est habituellement une tâche simple. J'ai un signe de forme simple qui a une entrée e-mail, entrée de mot de passe et un bouton d'envoi, le tout dans une ligne horizontale. Après des heures et des heures de prise de styles hors et essayer différentes structures, le bouton se trouve un peu plus bas, puis les boîtes. Je pense qu'il pourrait être parce que je l'ai absolument des éléments positionnés en cause ou que son assis dans un div qui a une image d'arrière-plan.

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 est ici 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 remarque:

#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 ralentissement à la fois le rendu de la page et la lecture du code (voir écriture efficace CSS ):

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

Ce qui précède fera la même chose que votre code. De plus, il 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 les entrées ne sont pas. 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 de définir 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 pas changer quoi que ce soit, 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. Retirer un d'entre eux pour éviter des erreurs difficiles à suivre.

9. Lorsque l'on regarde votre code PHP, je remarque que vous intégrez directement les _GET $ contenu à la page. Ceci est considéré comme dangereux et vous devriez toujours aseptiser cela en utilisant htmlentities pour éviter XSS.

EDIT:

Après avoir examiné le site, en changeant simplement le vertical-align de .sign_submit à fond fixe 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 fixé à baseline dans global.css.

Après cela, vous devrez peut-être ajouter quelques pixels de rembourrage supérieure pour obtenir le positionnement tout à fait correct, cependant.

Modifier

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

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