Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;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-transform:uppercase;
border:1px solid #CCC;
}#login_form .btn_send:hover {
background:#022F5D;
color:#FFF;
transition: 1s;#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.
Carregando comentários...