В стремлении к идеалу...
Как часто бывает, приходиться возвращаться к тому, о чем ранее писал не только потому, что сменился парк браузеров, и хотелось бы в них проверить, как оно и что.
Иногда, веянья времени совпадают и с переводом некоторых скриптов Мастера Lasto на обновленные рельсы, в частности речь идет о предполагаемом апгрейде Gold Shop’a.
Само собой, никоим образом не бегу впереди паровоза, но...
Сегодняшняя публикация посвящена формам.
Писал об этом в "Элементы web-страниц. Форма поиска". Комментарии были не однозначными, хотя скриншоты приведенные там свидетельствуют, что формам на web-страницах не уделяется должного внимания.
Личный опыт и это касаемо не только верстки, доказывает и подтверждает, что очень многое сокрыто в деталях и нюансах, а потому их проработке нужно уделять особое внимание.
Давайте посмотрим, что же необходимо, для приведения таких не послушных форм в божеский вид, в самых популярных браузерах.
Скриншот
html-код
<div id="forms">
<form name="search">
<input class="search" type="text">
<input class="submit" type="submit" value="Найти">
</form>
</div>
Стили
* {margin:0;padding:0;}
#forms {
border:1px #000 solid;margin:7px 10px 7px;
padding:4px;width:210px;
}
form {overflow:hidden;}
.search,.submit {
background-color:#fff;border:1px #000 solid;float:left;
}
.search {padding:1px 2px 0;width:156px;height:17px;}
.submit {font-size:11px;margin-left:2px;width:45px;height:20px;}
/* Start hack Section */
/* hack for FireFox 3.5 */
@-moz-document url-prefix(){.submit {padding-bottom:3px;}}
/* hack for IE6 */
*html form {zoom:1;}
/* End hack Section */
#forms не является обязательным.
Обратите внимание на разные высоты у поля ввода и кнопки "Найти".
Для той же кнопки желательно всегда указывать размер шрифта.
Без hack’a для FF, надпись на кнопке будет смещена вниз, что портит общую картинку.
Вот собственно, необходимый и достаточный минимум для нормального, практически идеального, визуального отображения формы поиска на web-ресурсе.