Проблема с формой поиска

[Veit]

Кто подскажет, почему форма поиска (поле ввода) вылазит за границы родительского блока, не прилегая к верхней его границе,высота элементов одинакова.

<form id="searchform" action="<?php bloginfo('siteurl'); ?>" method="get">
  <input id="stext" type="text" name="s" onblur="if(this.value =='')this.value='Поиск по сайту...'" onfocus="if(this.value =='Поиск по сайту...')this.value=''" value="Поиск по сайту..."/>
  <input id="smage" type="image" src="/wp-content/themes/ang-team/images/search.png"/>
</form>

CSS не закончен...

#searchform {
	float: right;
	height: 20px;
	width: 328px;
	}

#stext {
	width: 230px;
	height: 20px;
	border: 1px solid #CFCFCF;
	color: #444444;
	padding-left: 2px;
	}

#simage {
	}

Edited August 13, 2012 by Veit

[mrnobody]

Изменил высоту для #stext, так как высота формы 20px, вы задаете инпуту такую же высоту в 20px + сверху и снизу бордер + встроенные стили браузера задают паддинг в 1px, итого, высота равна 24px.

 height: 18px;

И добавил:

 vertical-align: top;
        padding: 0;

так как это строчно-блочный элемент, то по умолчанию выравнивается по базовой линии, поэтому мы его приподняли вверх.

http://jsfiddle.net/MFQX4/

Красный бордер для наглядности.

Edited August 13, 2012 by mrnobody

[Veit]

Изменил высоту для #stext, так как высота формы 20px, вы задаете инпуту такую же высоту в 20px + сверху и снизу бордер + встроенные стили браузера задают паддинг в 1px, итого, высота равна 24px.

 height: 18px;

И добавил:

 vertical-align: top;
        padding: 0;

так как это строчно-блочный элемент, то по умолчанию выравнивается по базовой линии, поэтому мы его приподняли вверх.

http://jsfiddle.net/MFQX4/

Красный бордер для наглядности.

Спасибо, не учел бордер...