soumettre le bouton cross browser positionnement

Question

Donc j'essaye de faire une boîte de connexion avec 2 champs et un bouton soumettre. Le bouton de soumission se positionne différemment dans CHAQUE navigateur. Dans Firefox, cela fonctionne comme prévu, mais dans IE8 et Safari, l'alignement vertical devient foiré. Des idées pour résoudre ce problème?

Voici un screendump de la question: 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

Essayez ces

.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; 
} 

et

<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

Essayez avec:

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

Answer 3

C'est le meilleur que j'ai pu faire jusqu'à présent en utilisant des tables (vérifiées sur Firefox, Chrome et IE8). Vous pouvez cependant remarquer une petite différence dans IE8.

Si vous utilisez ce code, vous devez mettre une image de fond dans votre bouton. Tout texte gâcherait la mise en page. Je ne peux pas croire qu'il est si difficile d'essayer de faire des choses aussi simples.

<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; 
}