отправить кнопку перекрестное расположение браузера

Question

Итак, я пытаюсь создать окно с двумя полями и кнопкой отправки. Позиция кнопки позиционирования по-разному в каждом браузере. В Firefox он работает так, как ожидалось, но в IE8 и Safari вертикальное выравнивание закручивается. Любые идеи для решения этой проблемы?

Вот screendump вопроса: 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

Попробуйте эти

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

и

<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

Попробуйте с:

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

Answer 3

Это лучшее, что я мог бы сделать до сих пор с помощью таблиц (проверено на Firefox, Chrome и IE8). Однако вы можете заметить небольшое несоответствие в IE8.

Если вы используете этот код, вам нужно поместить фоновое изображение в свою кнопку. Любой текст испортил бы макет. Не могу поверить, что так сложно даже попытаться сделать такие простые вещи.

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