Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Felipe.P

[Resolvido] Formulario

Por , em Desenvolvimento frontend

Recommended Posts

Felipe.P    0

Felipe.P
Postado

Olá gente,

estou criando esse form simples de login.

Quando eu visualizo ele no Chrome, ele fica perfeito do jeito que eu quero, mas quando visualizo no firefox a renderização fica totalmente diferente, existe algum CSSHACK pra correção disso?

 

Visualização no Chrome:

http://i47.tinypic.com/dh4xas.png

 

 

Visualização no Firefox:

http://i46.tinypic.com/dhejwl.png

 

 

Código HTML:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Intranet - ISC</title>
</head>

<body>
<div id="box">
  <div id="login_form">
	<form name="login" action="" method="post">
       <label>
      	<span>Username</span>
	  	<input type="text" name="login" placeholder="your username"/>
       </label>

       <label>
      	<span>Password</span>
	  	<input type="password" name="password" placeholder="your password"/>
       </label>

       <input type="button" value="SIGN IN" class="btn_send" />
	</form>
      <span class="minitext">
      Don't have a login? <a href="#">SIGN UP</a><br>
      <a href="#">Forgot username or password</a>
      </span>
  </div><!--login_form-->
</div><!--box-->
</body>
</html>

 

 

Código CSS


* {
margin:0;
padding:0;
}

body {
background:#022F5D;
}

#box {
width:1200px;
height:750px;
margin:0 auto;
background:#022F5D;
}

#login_form {
width:345px;
height:195px;
/*background:#FFF;*/
position: fixed;
margin:200px 400px;!important
padding:10px;
font-family:Helvetica;
color:#FFF;
}

#login_form label {
display:block;
margin-top:10px;
}

#login_form span {
display:block;
font-size:14px;
text-transform:uppercase;
letter-spacing:3px;
}

#login_form input {
margin-top:5px;
width:335px;
height:20px;
padding:5px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border:1px solid #CCC;
font-family:Helvetica;
letter-spacing:3px;
}

#login_form .btn_send {
float:right;
margin:10px 0 10px 0;
width:80px;
height:25px;
font-family:Helvetica;
text-align:center;!important
text-transform:uppercase;
border:1px solid #CCC;
}

#login_form .btn_send:hover {
background:#022F5D;
color:#FFF;
transition: 1s;
-moz-transition: 1s; /* Firefox 4 */
-webkit-transition: 1s; /* Safari and Chrome */
-o-transition: 1s; /* Opera */
}

#login_form .minitext {
font:9px Helvetica;
color:#FFF;
text-align:right;
float:rigth;
margin:10px 90px 0 0;
white-space: nowrap;
line-height:15px;
}

#login_form .minitext a {
color:#FFF;
text-decoration:none;
font-weight:bold;
}

#login_form .minitext a:hover {
border-bottom:1px dotted #FFF; 
}

 

 

Se alguem puder me ajudar, agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Como não sou tão apegado a "perfeições milimétricas" de layout, notei basicamente 3 diferenças:

 

- Tamanhos e espaçamento de fontes. Normal, já que a renderização varia conforme navegador, OS, ClearType etc.

 

- Espaçamento do botão "SIGN IN", creio que pode ser resolvido acrescendo:

 

#login_form .btn_send{padding:0}

 

- Cor do placeholder. Difícil modificar este, já que cada navegador atribui uma cor diferente ao estado "placeholder", e quando há foco no campo, a cor é outra. E também, os navegadores costumam interpretar o atributo "color" do CSS de maneira diferente nos 2 estados.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe.P    0

Felipe.P
Postado

Como não sou tão apegado a "perfeições milimétricas" de layout, notei basicamente 3 diferenças:

 

- Tamanhos e espaçamento de fontes. Normal, já que a renderização varia conforme navegador, OS, ClearType etc.

 

- Espaçamento do botão "SIGN IN", creio que pode ser resolvido acrescendo:

 

#login_form .btn_send{padding:0}

 

- Cor do placeholder. Difícil modificar este, já que cada navegador atribui uma cor diferente ao estado "placeholder", e quando há foco no campo, a cor é outra. E também, os navegadores costumam interpretar o atributo "color" do CSS de maneira diferente nos 2 estados.

 

Funcionou, ja deu uma melhorada ;)

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito