Enviar o botão que não está alinhado, não importa o quê com duas caixas de entrada em uma tabela

Question

Esta é normalmente uma tarefa simples. Eu tenho um formulário simples que possui uma entrada de email, entrada de senha e um botão Enviar, tudo em uma linha horizontal. Depois de horas e horas retirando os estilos e, experimentando diferentes estruturas, o botão fica um pouco mais baixo que as caixas. Estou pensando que pode ser porque tenho elementos absolutamente posicionados envolvidos ou que estão sentados em uma div que tem uma imagem de fundo.

Desde já, obrigado.

Aqui está a captura de tela:

Aqui está a estrutura 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>

E aqui está o 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

Algumas coisas que notei:

#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. Você pode simplificar isso. Esses seletores estão supercomplicados e desaceleram a renderização da página e a leitura do código (veja Escrevendo CSS eficientes):

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

O exposto acima fará o mesmo que o seu código. Além disso, não depende da estrutura HTML.

2. Ao olhar para as propriedades, percebo que todas as células da tabela têm um preenchimento diferente:

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

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

Você deve garantir que o preenchimento vertical seja o mesmo:

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

3. O botão Enviar tem uma altura definida, mas as entradas não. Se a altura for maior que a altura das entradas, é necessário alinhá -la verticalmente ao meio:

.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. Verifique se a imagem do botão de envio não possui uma faixa branca/transparente na parte superior.

5. Certifique -se de definir todas as margens de entrada vertical para 0:

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

6. Tente mover o campo de entrada oculto após o botão Enviar. Não deve mudar nada, mas quem sabe :)

7. Se nada disso ajudar, você também pode usar um hack de margem negativa (mas não é realmente uma boa solução):

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

8. Por acaso, você tem a regra para .sign_submit sobre a entrada duplicada. Remova um deles para evitar erros difíceis de rastrear.

9. Ao olhar para o seu código PHP, percebo que você incorpora diretamente o conteúdo $ _GET na página. Isso é considerado perigoso e você deve sempre higienizar isso usando htmlentities para evitar o XSS.

EDITAR:

Depois de olhar para o local, basta alterar o alinhamento vertical de .sign_submit para o fundo corrige o problema no meu navegador de ópera:

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

Answer 2

Adicionar vertical-align: bottom para td.sign_submit. Está atualmente definido como baseline em global.css.

Depois disso, pode ser necessário adicionar alguns pixels de preenchimento superior para obter o posicionamento exatamente correto.

Editar:

Parece que você precisará de uma nova regra para isso:

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