botón de envío no alineando no importa lo que con dos cajas de entrada en una tabla

Question

Esta es normalmente una tarea sencilla. Tengo una señal simple en su forma que tiene una entrada de correo electrónico, introducción de la contraseña, y un botón de envío, todo en una línea horizontal. Después de horas y horas de tomar estilos fuera, y tratando de estructuras diferentes, el botón se sienta un poco más baja que las cajas. Estoy pensando que podría ser porque he elementos que intervienen posición absoluta o que su sentado en un div que tiene una imagen de fondo.

Gracias de antemano.

Aquí está la captura de pantalla:

Aquí está la estructura 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>

y aquí está la CSS relevante:

#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

Algunas cosas me di cuenta:

#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. Se puede simplificar esto. Estos selectores son demasiado complicados y lentos pulsadas la representación de la página y la lectura del código (ver Escribir CSS eficiente ):

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

Lo anterior hará el mismo que el código. Por otra parte, no depende de la estructura HTML.

2. Al mirar las propiedades, noto que todas las celdas de la tabla tienen un acolchado diferente:

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

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

Usted debe asegurarse el relleno vertical es la misma:

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

3. El botón de envío tiene una altura definida, pero las entradas no. Si la altura es mayor que la altura de las entradas, es necesario alinear verticalmente a medio:

.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. Asegúrese de que el botón de enviar la imagen no tiene una raya blanca / transparente en la parte superior.

5. Asegúrese de configurar todos los márgenes verticales de entrada a 0:

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

6. Tratar de mover el campo de entrada oculto tras el botón de envío. no debe cambiar nada, pero que sabe:)

7. Si nada de lo anterior ayuda, también puede utilizar un truco margen negativo (pero en realidad no es una buena solución):

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

8. Le sucede que tiene la regla para .sign_submit entrada duplicada. Extraiga uno de ellos para evitar difícil realizar un seguimiento de errores.

9. Al mirar su código PHP, noto incrusta directamente el contenido $ _GET a la página. Esto se considera peligroso y siempre se debe desinfectar usando este htmlentities para evitar XSS.

EDIT:

Después de mirar el sitio, simplemente cambiando la vertical-align de .sign_submit a correcciones de fondo el problema en mi navegador Opera:

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

Answer 2

Añadir a vertical-align: bottom td.sign_submit. Se fija actualmente a baseline en global.css.

Después de eso, es posible que tenga que añadir unos pocos píxeles de relleno de la parte superior para conseguir el posicionamiento exactamente correcto, sin embargo.

Editar

Parece que va a necesitar una nueva regla para que:

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