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

Question

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

Вот так выглядит в Chrome:

А вот мой 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>

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

РЕДАКТИРОВАТЬ Вот кнопка 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/