Aliance, по-моему, стоит вообще изрядно упростить вёрстку. Вложенная таблица logo_middle, по-моему, совершенно не нужна. Разночтения между браузерами в отображении формы - из-за того, что таблице заданы взаимоисключающие параметры ширины: оба столбца фиксированной ширины, но всё вместе - 100%. FF/Opera, имхо, ведут себя логично - прижимают форму к краю ячейки (т.к. стоит text-align: right), а IE пытается "угадать задуманную ширину" (правда, только если ширина окна больше 1000px).
Вот вариант "шапки" с минимальными, на мой взгляд, переделками:
| Код |
<table id="logo">
<tr>
<td id="logo_layer_top" colspan="2"></td>
</tr>
<tr id="logo_middle">
<td id="logo_middle_left"></td>
<td id="logo_middle_right">
<form action="" method="post" id="login-form">
<div><label class="login" for="ipb_nick">Логин:</label> <input type="text" id="ipb_nick" name="ipb_nick" /></div>
<div><label class="login" for="ipb_pass">Пароль:</label><input type="password" id="ipb_pass" name="ipb_pass" class="input_password" /></div>
<div class="centered"><a href="http://forum.morgenshtern.com/index.php?act=Reg&CODE=10" id="forget" onclick="open_window(this.href); return false;">Забыли пароль?</a>
<input type="image" id="enter_button" src="http://www.morgenshtern.com/img/enter.gif" alt="Войти" /></div>
</form>
</td>
</tr>
<tr>
<td id="logo_layer_bottom" colspan="2"></td>
</tr>
</table>
|
| Код |
#logo_middle {
height: 129px;
background-color: #ece9eb;
}
#logo_middle_left {
width: 717px;
background: url(http://www.morgenshtern.com/img/spring/logo.jpg) no-repeat #ece9eb;
}
#logo_middle_right {
background: url(http://www.morgenshtern.com/img/spring/logo_enter.gif) 100% 0% no-repeat #ece9eb;
padding: 0;
text-align: right;
}
#logo_middle_right form {
margin: 0 50px 20px 0;
width: 233px;
}
#logo_middle_right .centered {
line-height: 14px;
margin: 0;
padding: 0;
}
#logo_middle_right .centered input {
margin: 0 0 0 20px;
vertical-align: middle;
}
|
Хотя на мой характер, я бы как раз каркас шапки делал дивом (контейнер 100% на 129px), а форму - табличкой, "плавающей" в этом контейнере по правому краю. А в табличке и надпись относительно картинки или поля центрируется (я так понимаю, вопрос в вертикальном центрировании) автоматически... |
