<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>
Формы: поля ввода в эксплорере - не правильно отображаются!
Уже не знаю что делать. Имеется форма авторизации пользователя. Во всех браузерах, кроме IE, поля ввода логина и пароля имеют одинаковую длину (поскольку так указано в коде HTML и в CSS).
А в этом чертовом эксплорере форма показывается как на прикрепленной картинке. Почему, несмотря на одинаковые значения длины полей ввода (size="15"), в эксплорере они отображаются разными по длине?
Код HTML:
Код:
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;
}
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.
Код:
<!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>
<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>
Возможно, дело в доктайпе или ты не все показал - есть где-то противоречия в коде.
А вообще - история с формами это редкий ужас. Я в свое время столько угрохал сил на это.
Почему, несмотря на одинаковые значения длины полей ввода (size="15"), в эксплорере они отображаются разными по длине?
[/QUOTE]
Спору нет, IE он осел и есть. Идиотский браузер. Однако в данном случае стоит более внимательно читать спецификацию.
Цитата:
size = cdata [CN]
Сообщает пользовательскому агенту начальную ширину ЭУ. Ширина задаётся в пикселах, за исключением случаев, когда атрибут type имеет значение "text" или "password". В этом случае значение атрибута - (integer) целое число символов.
Сообщает пользовательскому агенту начальную ширину ЭУ. Ширина задаётся в пикселах, за исключением случаев, когда атрибут 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>
<!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>
Спасибо, Alekciy. Сделал по приведенному тобой примеру, и все заработало как надо :)