Проблемы с css - Joomla 1.0: Общие вопросы

Добрый день!
Возможно пишу не туда, но крыша уже едет. Толи я туплю, то ли не догоняю. Есть модуль Поиск я его правлю. Задал картинку вместо кнопки. Никак не пойму как работает css!!!

Есть блок поиска:

<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 все скачет??? Откуда лишние пиксели над или под картинкой????  Если не туда пишу - скажите плиз где искать. Третий час борюсь, ниче не понимаю...

[вложение удалено Администратором]

это не проблемы css, это проблемы браузера.

используйте conditional comments для IE

и задайте верхний отступ для кнопки.

так и сделал. и еще для form задал padding и margin 0.