[Resolvido] Input Desporporcional

[vitinho.vitor 0]

Olá pessoal,

tenho um pequeno sistema para verificar se o email já existe no banco de dados, porém o campo input está ficando desregulado, segue o print:

Já tentei de todas as formas com class e CSS porém não adianta.

 

Segue o código:

<tr><td align="right" colspan="2">Nome:</td>
<td align="left" colspan="2"><input type="text" class="texto" name="nome" size="50" /></td></tr>
<tr><td align="right" colspan="2"><div id="alerta" style="display:inline"></div>E-Mail:</td>
<td align="left" colspan="2"><input name="login" id="login" type="text" maxlength="30" size="50" class="texto" onblur="javascript: envia('recebe.php', 'POST', false);" /></td></tr> //esse é o input
<tr><td align="right" colspan="2">Telefone:<br><font size="2">Somente Números</font></td><td align="left" colspan="2"><input type="text" name="ddd" size="3" maxlength="2" class="texto" /> <input type="text" name="telefone" class="texto" size="17" maxlength="8" /></td></tr>

Essa é somente uma parte.

 

E o CSS

 

html, body {
       margin:0;
       padding:0;
} 
.texto {
       border:1px solid gray;
}


.erro {
       border:1px solid red;
}

.ok {
       border:1px solid #03D657;
}

 

Alguém tem uma ideia?

 

Obrigado

Vitor

[Thiago Retondar 18]

Primeira coisa » se ponha como usuário final e me diga: está vendo alguma tabela no visual?

 

Obviamente não, então livre-se delas no código também. ;)

 

Evite também o excesso de atributos que estilizam a página. Eu uso isso no máximo quando é a exceção da exceção e já acho feio.

 

Então remonte o HTML e depois parta pro CSS. Aqui na parte de tutorias tem coisas legais sobre formulário.

 

:thumbsup:

[vitinho.vitor 0]

Então, fiz um código que acho ser mais correto, segue:

<form action="cadastra.php" method="post" name="form1" id="form1" onSubmit="return validaForm()">
<div style="width:60%" id="tudo">
<div style="background-color:#006; color:#FFF; width:100%; text-align:center" id="cabecalho">
	1° Passo - Básico (Obrigatório)
   </div>

       <div style="width:100%" id="form">
       <label>Nome:</label>
       <input type="text" class="texto" name="nome" size="50" />

       <label><div id="alerta" style="display:inline"></div>E-Mail:</label>
       <input name="login" id="login" type="text" maxlength="30" size="50" class="texto" onBlur="javascript: envia('recebe.php', 'POST', false);" />

       <label>Telefone:<br><font size="2">Somente Números</font></label>
       <input type="text" name="ddd" size="3" maxlength="2" class="texto" /> <input type="text" name="telefone" class="texto" size="17" maxlength="8" />

       <label>Senha:</label>
       <input type="password" class="texto" name="senha" size="15" />

       <label>Confirma Senha:</label>
       <input type="password" name="senha2" class="texto" size="15" />

       <label>
       <input type="submit" value=" Cadastrar " class="botao_login" id="confirma" name="cadastrar" />
       </label>
       </div>

</div>
</form>

 

E o CSS

 

<style>
.texto {
       border:1px solid gray;
}


.erro {
       border:1px solid red;
}

.ok {
       border:1px solid #03D657;
}
label {
display:block;
}
</style>

 

O sistema de mostrar a pequena imagem da confirmação da busca está funcionando, porém continua mostrando esse erro somente no campo email.

Segue a imagem:

 

O que está errado?

 

Obrigado,

Vitor

[Thiago Retondar 18]

Veja se o #login não está interferindo em nada (no CSS). O ID tem prioridade sobre o CLASS.

 

:thumbsup:

 

P.S.: Se não conseguir resolver, posta o link para o site.

[vitinho.vitor 0]

Perfeito!!!!

 

Alterei o ID e deu tudo certo!

Muito Obrigado, eu nunca imaginaria isso :)

 

Obrigado,

Vitor