2010-09-10 2 views
2

Я создал контактную форму на странице контакта с сайтом, который я создаю. Макинтош-браузеры отображают его правильно, поэтому IE7 и IE8 в Windows.Почему моя форма контакта отображается неправильно в браузерах Windows?

У FF, Chrome и Safari есть проблемы с интервалом на платформе Windows. Мой код указан ниже;

<form action="" method="post"> 
    <fieldset id="fs1"> 
     <div id="formLeftCol"> 
      <ol> 
       <li> 
        <label for="name">Your Name*</label> 
       </li> 
       <li> 
        <input id="name" name="name" type="text" /> 
       </li> 
       <li> 
        <label for="email">E-mail*</label> 
       </li> 
       <li> 
        <input id="email" name="email" type="text" /> 
       </li> 
       <li> 
        <label for="website">Website</label> 
       </li> 
       <li> 
        <input id="website" name="website" type="text" /> 
       </li> 
       <li> 
        <input type="submit"name="submit" value="SUBMIT" /> 
       </li> 
      </ol> 
     </div> 
     <div id="formRightCol"> 
      <ol> 
       <li> 
        <label>Your Message*</label> 
       </li> 
       <li> 
        <textarea name="message" cols="40" rows="7"> 
         Please leave us a message... 
        </textarea> 
       </li> 
      </ol> 
     </div> 
    </fieldset> 
</form> 

Теперь CSS:

#formLeftCol, #formRightCol { 
    float: left; 
} 
#formLeftCol { 
    width: 150px; 
} 
#formRightCol { 
    width: 473px; 
    margin-left: 15px; 
} 
input, textarea { 
    background: #f9f9f9; 
    border: 1px solid #c1c1c1; 
    font-family: Helvetica, Arial, sans-serif; 
    color: #818181; 
    margin: 10px 0; 
    padding: 10px; 
} 
fieldset { 
    padding: 15px; 
} 
textarea { 
    width: 451px; 
} 
#fs1 { 
    border: 1px solid #c1c1c1; 
} 

текстовое поле не будет само пространство соответственно, это слишком широкий на этом браузере, но каждые из них работает.

Thanks

ответ

1

Ваша проблема в CSS точно. Я не уверен, что у вас происходит с OSX, но я вижу проблему в кучке браузеров в Windows (IE, FF, Chrome).

Попробуйте указать ширину для ваших входов с помощью CSS:

input { 
    width:141px; 
} 

Это, кажется, дает эффект я воображал вы хотите: http://jsfiddle.net/P5jkJ/1/

+0

Все плавает правильно и размеры кажутся совершенными, единственная проблема - левый край: 15px; по какой-то причине игнорируется. –

+0

Я могу подтвердить, что это работает, WebKit имеет более высокую ширину по умолчанию для элемента 'input', поскольку он выглядит отлично, без каких-либо изменений в Firefox 4 Beta. (Linux) –

+0

Я поменял поля на другой контейнер, и теперь все работает. Спасибо за помощь. Это было здорово. –

Смежные вопросы