Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Формы: поля ввода в эксплорере - не правильно отображаются!

18K
17 ноября 2006 года
ibrnax
7 / / 17.10.2006
Народ, помогите!
Уже не знаю что делать. Имеется форма авторизации пользователя. Во всех браузерах, кроме IE, поля ввода логина и пароля имеют одинаковую длину (поскольку так указано в коде HTML и в CSS).
А в этом чертовом эксплорере форма показывается как на прикрепленной картинке. Почему, несмотря на одинаковые значения длины полей ввода (size="15"), в эксплорере они отображаются разными по длине?

Код HTML:
 
Код:
<table cellpadding="0" cellspacing="0" border="0">
<form class="aufield" method="post" action="http://www.mysite.ru/login/">
<tr><td align="left">логин:</td><td>  <input type="text" name="nic" class="rfield_expand" size="15" /></td></tr>
<tr><td align="left">пароль:</td><td>  <input type="password" name="pwd" class="rfield" size="15" /></td></tr>
<tr><td colspan="2" align="right"><input type="submit" name="submit" value="войти" /></td></tr>
</form>
</table>


CSS:
Код:
.aufield {
text-align: right;
}
.rfield {
background: #FFF;
border: 1px solid #868A9B;
}
.rfield_expand {
background: #FFF;
border: 1px solid #868A9B;
}

html > body .rfield_expand {
margin-bottom: 4px;
}


Вынос тэгов <form> за пределы таблицы не помогает, прописывание в CSS ширины полей ввода в пикселях или процентах - тоже не помогает. Это такой глюк у IE? Как эту проблему можно решить? Версия IE - 6.
308
17 ноября 2006 года
Комаджу
850 / / 26.07.2006
Твой код у меня отображается несколько лучше:

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">

.aufield {
text-align: right;
}
.rfield {
background: #FFF;
border: 1px solid #868A9B;
}
.rfield_expand {
background: #FFF;
border: 1px solid #868A9B;
}

html > body .rfield_expand {
margin-bottom: 4px;
}

</style>
</head>
<body>

<table cellpadding="0" cellspacing="0" border="0">
<form class="aufield" method="post" action="http://www.mysite.ru/login/">
<tr><td align="left">логин:</td><td>  <input type="text" name="nic" class="rfield_expand" size="15" /></td></tr>
<tr><td align="left">пароль:</td><td>  <input type="password" name="pwd" class="rfield" size="15" /></td></tr>
<tr><td colspan="2" align="right"><input type="submit" name="submit" value="войти" /></td></tr>
</form>
</table>

</body>
</html>


Возможно, дело в доктайпе или ты не все показал - есть где-то противоречия в коде.
А вообще - история с формами это редкий ужас. Я в свое время столько угрохал сил на это.
12
17 ноября 2006 года
alekciy
3.0K / / 13.12.2005
[QUOTE=ibrnax]
Почему, несмотря на одинаковые значения длины полей ввода (size="15"), в эксплорере они отображаются разными по длине?
[/QUOTE]
Спору нет, IE он осел и есть. Идиотский браузер. Однако в данном случае стоит более внимательно читать спецификацию.
Цитата:
size = cdata [CN]
Сообщает пользовательскому агенту начальную ширину ЭУ. Ширина задаётся в пикселах, за исключением случаев, когда атрибут type имеет значение "text" или "password". В этом случае значение атрибута - (integer) целое число символов.


Кроме того использование атрибута align="right" так же является неверным. Уже даже в HTML 4 это не рекомендуется использовать. Все оформление выносится в CSS. И задание ширины так же должно делать через CSS.

Код:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.value {
    width: 70px;
}
.rfield {
    width: 100%;
}
.field {
    width: 100px;
}
</style>
</head>

<body>

<table cellpadding="0" cellspacing="0" border="0">
    <form class="aufield" method="post" action="http://www.mysite.ru/login/">
        <tr>
            <td class="field">логин:</td>
            <td class="value"><input type="text" name="nic" class="rfield" /></td>
        </tr>
        <tr>
            <td class="field">пароль:</td>
            <td class="value"><input type="password" name="pwd" class="rfield" /></td>
        </tr>
        <tr>
            <td  class="value" colspan="2"><input type="submit" name="submit" value="войти" /></td>
        </tr>
    </form>
</table>

</body>

</html>
18K
20 ноября 2006 года
ibrnax
7 / / 17.10.2006
Спасибо, Alekciy. Сделал по приведенному тобой примеру, и все заработало как надо :)
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог