форма ввода и кнопка отправки в той же строке

Question

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

Вот как это выглядит в хроме:

А вот мой CSS:

#search_input{ 
-moz-border-bottom-colors: none; 
-moz-border-image: none; 
-moz-border-left-colors: none; 
-moz-border-right-colors: none; 
-moz-border-top-colors: none; 
border-color: #DEDEDE; 
border-style: solid none solid solid; 
border-width: 1px medium 1px 1px; 
height:25px; 
padding-left:3px; 
} 


#search_submit { 
position: relative; 
right: 4px; 
top: 8px; 
} 

Также HTML:

<form action="#"> 
    <input id="search_input" type="text" name="search" /> 
    <input id="search_submit" type="image" src="../media/images/search_button.jpg" /> 
</form> 

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

EDIT Вот кнопка http://shinigami.cd.lt/media/images/search_button.jpg

вход осуществляется CSS не изображения используется.

Answer 1

Размер изображения неправильный.

Высота вашего изображения должен быть:

<height of input> + <padding of input> + <border of input> 
= 25 + 0 + 2x1 = 27px 

Скорректированный CSS можно найти здесь (применяется зум для целей отладки): http://jsfiddle.net/BJJ38/2/

Чтобы убедиться, что входные элементы выглядят ожидается, что вы должны явно определить свойства padding-top и -bottom. Объединенное с padding-left следующее свойство проявляется:

padding: 0 0 0 3px; 

Кроме того, вы должны определить ширину для последовательного взгляда. Например:

width: 50px; 

Альтернативный подход будет размещение кнопки в поле ввода, и расширяя правый отступы, так что план на фокус выглядит лучше: http://jsfiddle.net/BJJ38/3/