Как часто бывает, приходиться возвращаться к тому, о чем ранее писал не только потому, что сменился парк браузеров, и хотелось бы в них проверить, как оно и что.

Иногда, веянья времени совпадают и с переводом некоторых скриптов Мастера 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-ресурсе.

Пример