Поля и отступы для форм, не отвечающих в IE8 - PullRequest
Новая
       15

Поля и отступы для форм, не отвечающих в IE8

0 голосов
/ 16 февраля 2012

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

Вот ссылка на изображение, отображающее проблему: http://i.imgur.com/F6zPP.jpg

Это не так уж сложно, просто очень раздражает с точки зрения дизайнера и, вероятно, пользователя.

Вот jsfiddle, чтобы увидеть, как выглядит форма: http://jsfiddle.net/kennyk3/qL96P/

А вот HTML / CSS для формы: 

<div id='account'>
            <form id='login' action='signin.php' method='post' accept-charset='UTF-8'>
            <fieldset class='topform'>
            <input type='hidden' name='submitted' id='submitted' value='1'/>
            <div id='front_login_text'>
            <label for='email'>Email:</label>                               
            <input type='text' name='email' id='email' class='textInput' maxlength='50' />
            <label for='password'>Password:</label>
            <input type='password' name='password' id='password' class='textInput' maxlength='50' />
            </div>
            <input type='submit' name='Submit' value='' class='loginsubmit' />
            <p class='remtext'><input type='checkbox' class='rememberme' name='remember' value='remember' />Remember me on this computer</p>
            <p class='notamember'><strong>Not a Member?</strong> <a href='/register.php'>Sign Up Today!</a></p>
            </fieldset>
            </form>
            <p class='forgotpw'>Forgot Your Password? <a href=''><strong>Click Here to Reset it.</strong></a></p>
            </div>
            <div class='break'></div>
            <div id='button'>
            <a href='' class='toursprite' title='Take the Tour'>Take the Tour</a>
            </div>



.topform    {
    padding: 60px 0 0 20px ;
    border: none;
}
.textInput
{
    width: 190px;
    height: 39px;
    background: url(../images/textfield-bg.png) no-repeat;
    border: none;
    color: #929292;
    padding: 0 20px 0 10px;
    margin: 5px 0 0 0;
    overflow: hidden;
}

.textInput:hover {
    background: url(../images/textfield-hover.png) no-repeat;

}
#account label {
    float: left;
    text-align: right;
    width: 60px;
    font-size: 14px;
    margin: 12px 10px 0 0;
    color: #929292;
}

#account fieldset {
    width: 300px;
}

#front_login_text input:focus, #front_login_text textarea:focus {
    outline: 0;
    background: url(../images/textfield-hover.png) no-repeat;
}

#side_login_text input:focus, #side_login_text textarea:focus {
    outline: 0;
    background: url(../images/textfield-hover-small.png) no-repeat;
}

#side_optin_text input:focus, #side_optin_text textarea:focus {
    outline: 0;
    background: url(../images/textfield-hover-small.png) no-repeat;
}

.loginsubmit {
    float: right;
    margin: 10px 5px 0 0;
    width: 70px;
    height: 35px;
    background: url(../images/login-btn.png) center no-repeat;
    border: 0 none;
    cursor: pointer;
}

.loginsubmit:hover {
    float: right;
    margin: 10px 5px 0 0;
    width: 70px;
    height: 35px;
    background: url(../images/login-btn-hover.png) center no-repeat;
    border: 0 none;
    cursor: pointer;
}

.loginsubmit:active {
    float: right;
    margin: 10px 5px 0 0;
    width: 70px;
    height: 35px;
    background: url(../images/login-btn-active.png) center no-repeat;
    border: 0 none;
    cursor: pointer;
}

Ответы [ 3 ]

0 голосов
/ 16 февраля 2012

Если вы установите высоту строки примерно в 200% или 250%, она все равно должна отображаться в центре Chrome, а в IE должна быть намного ближе к центру.Я только что попробовал это на ваших формах.

Это не так чисто, как исправление CSS для браузера, но оно может удовлетворить ваши потребности.

0 голосов
/ 16 февраля 2012

IE8 смешно читает поля и иногда сворачивает их.Вместо того, чтобы что-либо переделывать, сделайте этот хак CSS: 

.textInput
{
    width: 190px;
    height: 39px;
    background: url(http://i.imgur.com/sEdWU.png) no-repeat;
    border: none;
    color: #929292;
    padding: 0 20px 0 10px;
    margin: 5px 0 0 0;
    padding: 10px 20px 0 10px\9;
    overflow: hidden;
}
0 голосов
/ 16 февраля 2012

При работе с кросс-браузерными формами.Убедитесь, что вы определили высоту строки для полей.Это может иметь все значение и может исправить ваши несоответствия.

...