Asger Asger - 2 months ago 11
CSS Question

submit button cross browser positioning

So i'm trying to make a login box with 2 fields and a submit button. The submit button position itself differently in EVERY browser. In Firefox it works as expected but in IE8 and Safari the vertical alignment gets screwed up. Any ideas to resolve this problem?

Here's a screendump of the issue: http://gefuhlkunder.dk/bla.jpg

<form action="">
<div>
<input type="text" name="brugernavn" class="login-input" value="Brugernavn" />
<input type="text" name="brugernavn" class="login-input" value="password" />

<input class="login-submit" type="submit" value="login" />
</div>
</form>

.login-input{

border:1px solid #bebebe;
font-family: 'FlamaBook', sans-serif;
font-size:10px;
letter-spacing:-0.4px;
text-transform:uppercase;
color:#464646;
font-size-adjust: 0.5;

height:18px;
line-height:18px;
text-align:center;
width:69px;
margin:0 3px 0 0;

}


.login-submit{


border:1px solid #bebebe;
font-family: 'FlamaBook', sans-serif;
font-size:10px;
letter-spacing:-0.4px;
text-transform:uppercase;
color:#464646;
font-size-adjust: 0.5;

text-align:left;
position:absolute;
padding: 0px 0px 0 3px;
width:59px;
height:20px;
line-height:20px;
background:#fff url(images/submit_bg.png);
cursor:pointer;



}

Answer

Try these

.login {
    font-family: sans-serif;
    font-size:10px;
    border:1px solid #bebebe;
    text-transform:uppercase;
    text-align:center;
    color:#464646;
    cursor:pointer;
    padding:3px;
    margin-right:3px;
}
.login-submit {
    margin-top:3px; 
}

and

<form action="">
<div>
    <input type="text" name="brugernavn" class="login login-input" value="Brugernavn" />
    <input type="text" name="brugernavn" class="login login-input" value="password"  />

    <input class="login login-submit" type="submit" value="login" />
</div>