submit button cross browser positioning

Question

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 1

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>

Answer 2

Try with:

height:18px;
margin: 3px 0 0;

Answer 3

This is the best I could do so far using tables (checked on Firefox, Chrome and IE8). You can however notice a small discrepancy in IE8.

If you use this code, u need to put a background image in your button. Any text would mess up the layout. Can't believe it is so tricky to even try do such a simple things.

<table border="0" cellpadding="0" cellspacing="0"> 
    <tr>
        <td class="firstTd">
            <div class="styleOne">
                <input id="searchEntry" value="" title="Search" size="41" type="text" name="searchEntry"/>
            </div>
        </td>
        <td>
            <div>
                <button value="Search" class="buttonStyle" type="submit" name="myButton">
                    <span></span> 
                </button>
            </div>
        </td>
    </tr>
</table>

table {
    width: 342px;
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
    position: relative;
    border-bottom: 1px solid transparent;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
td, th {
    display: table-cell;
    vertical-align: inherit;
}
td.firstTd{
    width: 281px;
}
div.styleOne {
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-top-color: #c0c0c0;
    height: 27px;
    display: block;
    width: 281px;
}
input#searchEntry{
    font-size: 20px;
    width: 278px;
}
button.buttonStyle{
    padding: 12px 22px;
}