Почему моя контактная форма отображается неправильно в браузерах Windows? - PullRequest
2 голосов
/ 10 сентября 2010

Я создал контактную форму на странице контактов на веб-сайте, который я создаю. Браузеры Mac отображают его правильно, как и IE7 И IE8 в 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;
}

Текстовое поле не будет соответственно выделяться, оно слишком широкое в этих браузерах, но все остальные работают.

Спасибо

1 Ответ

1 голос
/ 10 сентября 2010

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

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

input {
    width:141px;
}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...