Почему мое текстовое поле по-разному позиционируется в разных браузерах

это структура html.

       <form id="coment"....>
  <div id="name"><input....>....</div>
   <div id="email"><input....>....</div>
  <div id="website"><input....>....</div>
  <div id="textbox"><textarea...>....</div>
<div id="submit"><input...>....</div>
 </form>

я хочу, чтобы текстовое поле было справа от имени, электронной почты, текста веб-сайта. как показано на этом рисунке. http://run.xxmn.com/1.png

когда я добавляю этот стиль в "текстовое поле",

    width:400px;
   position: relative;
   top: -70px;
    left: 3px;

в Chrome и IE 8 неупорядоченный идентификатор div текстовой области, он находится выше имени, электронной почты, части веб-сайта.

В Firefox IE6,7.он показывает нормально.

Как я могу сделать так, чтобы это было правильно и в Chrome, и в IE 8?


html css position css-float
person runeveryday    schedule 19.11.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Правильным способом размещения этого было бы создание новых div, представляющих столбцы для формы, и размещение трех входных данных в левом столбце и текстового поля в правом столбце.

Например:

<div class="left">
    <div id="name"><input....>....</div>
    <div id="email"><input....>....</div>
    <div id="website"><input....>....</div>
</div>
<div class="right">
    <div id="textbox"><textarea...>....</div>
</div>

Затем:

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}

#name, #email, #website, #textbox {
    width: 100%;
}

#testbox {
    height: 300px; /* However tall it needs to be */
}
person Marcus Whybrow    schedule 19.11.2010