Лишние пиксели

[dron]

Добрый день. У меня проблема с лишними пикселями. Вот пример:

Есть блок (строка поиска + кнопка, все это в блоке):

<div class="search">

<input name="searchword" id="mod_search_searchword" maxlength="100" alt="search" class="inputbox" type="text" size="15" value="Поиск..." onblur="if(this.value=='') this.value='Поиск...';" onfocus="if(this.value=='Поиск...') this.value='';" />

<input type="submit" value="Поиск" class="button"/>

</div>

Задаю стили:

(для блока)

div.search {

height: 21px;

}

(для строки)

.inputbox {

border: 1px solid #ccc;

font-family: Arial;

font-size: 13px;

margin: 0px;

}

(для кнопки)

input.button {

background: url(../images/search.gif) no-repeat;

height: 21px;

width: 21px;

border: none;

padding: 0px;

margin: 0px;

}

Отчего в IE и Chrome все скачет??? Откуда лишние пиксели над или под картинкой???? Третий час борюсь, ниче не понимаю...

Заранее спасибо!

[Колос]

Помню сталкивался с подобным. Решить тогда не смог, пришлось таблицами заменить.

[s0rr0w]

Играться с vertical-align у элементов. У текстового элемента в первую очередь

[Great Rash]

Я обычно делаю так:

input, select, textarea {
	vertical-align: middle;
}

и все работает як часы.

[dron]

мля, как всегда все оказалось гораздо проще... дело в том, что строка поиска - это же form! надо было всего навсего задать

form {

margin: 0;

padding: 0;

}

ну и еще на всякий пожарный

text-indent: 0;

vertical-align: baseline;