Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Nome: Josano

Campos desalinham em no IE

04-05-2012 15:38

Pessoal boa tarde,

Estou montando um formulário porém quando testei no Firefox os campos ficaram desalinhados.
Se alinha eles no firefox desalinham no IE, já não sei como resolver.
Alguém pode me dar um ajuda?

Segue abaixo o codigo do form e o abaixo o css:

Html

                <form class="formulario" action="" method="post">                         <fieldset class="fieldset">                                 <legend class="legenda">Dados Usuário</legend>                                         <div class="formulario">                                                 <label class="labels" style="margin-left:60px">Nome:</label>                                                 <input class="inputs" name="dfsNome" size="60" type="text" style="margin-left:31px"/>                                                 <label class="labels" style="margin-left:60px">Cpf:</label>                                                 <input class="inputs" name="dfsCpf" size="14" type="text" style="margin-left:31px"/>                                                 <br />                                                 <label class="labels" style="margin-left:48px">Usuário:</label>                                                 <input class="inputs" name="dfsUsuario" type="text"/>                                                 <label class="labels" style="margin-left:235px">Senha:</label>                                                 <input class="inputs" name="dfsSenha" type="password"/>                                         </div>                         </fieldset>                </form>

Css

.fieldset{         border-color: #79BCFF;         border-style: double;         margin-bottom: 20px;             }   .legenda{         font-weight: normal;         font-size: small;         border-style: groove;         border-width: thin;         background-color: #79BCFF;      }   .formulario{         width: 90%;         margin-left: 5%;         margin-right: 5%;                       clear:both;     }   .labels{         margin:100px 0px 20px 50px;         font-size: 12px;         text-align:right;         float:none ;         clear:left;         left: auto ; }   .inputs{         margin:0px 0px 20px 30px;         font-size: 12px;         text-align:left;         text-transform:uppercase;         float:none ;         clear:left; }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17743
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Campos desalinham em no IE

04-05-2012 15:44

Nesse caso só vai ficar igual se você aplicar uma regra com o doctype na página.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Nome: Josano

Campos desalinham em no IE

04-05-2012 15:49

Ola Obrigado pela resposta.

No caso já está assim, inserir apenas o form com a div, o codigo completo é esse:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Cadastro de Produtos</title>   <link href="formulario.css" rel="stylesheet" type="text/css" />                           </head>   <body>   <div class="externo"> <img alt="" height="114" src="img/logo_cliente.jpg" width="306" /><br />         <div id="page-wrap">           <?include '../include/menu.php';?>         </div>           <br />           <br />                 <form class="formulario" action="" method="post">                         <fieldset class="fieldset">                                 <legend class="legenda">Dados Usuário</legend>                                         <div class="formulario">                                                 <label class="labels" style="margin-left:60px">Nome:</label>                                                 <input class="inputs" name="dfsNome" size="60" type="text" style="margin-left:31px"/>                                                 <label class="labels" style="margin-left:60px">Cpf:</label>                                                 <input class="inputs" name="dfsCpf" size="14" type="text" style="margin-left:31px"/>                                                 <br />                                                 <label class="labels" style="margin-left:48px">Usuário:</label>                                                 <input class="inputs" name="dfsUsuario" type="text"/>                                                 <label class="labels" style="margin-left:235px">Senha:</label>                                                 <input class="inputs" name="dfsSenha" type="password"/>                                         </div>                         </fieldset>                         <fieldset class="fieldset">                                 <legend class="legenda">Dados Usuário</legend>                                         <div class="formulario">                                                 <label class="labels" style="margin-left:60px">Nome:</label>                                                 <input class="inputs" name="dfsNome" size="60" type="text" style="margin-left:31px"/>                                                 <label class="labels" style="margin-left:60px">Cpf:</label>                                                 <input class="inputs" name="dfsCpf" size="14" type="text" style="margin-left:31px"/>                                                 <br />                                                 <label class="labels" style="margin-left:48px">Usuário:</label>                                                 <input class="inputs" name="dfsUsuario" type="text"/>                                                 <label class="labels" style="margin-left:235px">Senha:</label>                                                 <input class="inputs" name="dfsSenha" type="password"/>                                         </div>                         </fieldset>                                         </form>                 &nbsp;</div>   </body>   </html>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17743
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Campos desalinham em no IE

04-05-2012 15:56

Testei aqui no FF e no IE e aparentemente o alinhamento está o mesmo.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Nome: Josano

Campos desalinham em no IE

04-05-2012 16:03

Segue anexo o css do formulario.

Na verdade os inputs da direta estão desalinhados o de cima com o de baixo

.externo{         width:90%;         border: 1px solid #808080;         margin-top: 10px;         margin-bottom: 20px;         margin-left: 5%;        }   .formulario{         width: 90%;         margin-left: 5%;         margin-right: 5%;                       clear:both;     }   .fieldset{         border-color: #79BCFF;         border-style: double;         margin-bottom: 20px;             }   .legenda{         font-weight: normal;         font-size: small;         border-style: groove;         border-width: thin;         background-color: #79BCFF;      }   .botao{         width:150px;         text-align:center;         font-size:medium;         border:hidden;         border-color:#79BCFF;         margin-left:45%;         margin-bottom:20px;         background-color:#5EAEFF;       }   .labels{         margin:100px 0px 20px 50px;         font-size: 12px;         text-align:right;         float:none ;         clear:left;         left: auto ; }   .inputs{         margin:0px 0px 20px 30px;         font-size: 12px;         text-align:left;         text-transform:uppercase;         float:none ;         clear:left; }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17743
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Campos desalinham em no IE

04-05-2012 16:08

Você tem um margin-left no campo cpf que está empurrando ele para frente. Tenta assim:

<label class="labels" style="margin-left:45px">Cpf:</label>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado