form input and submit button in same line

Question

I am trying to create search field, now this is how it looks on all browsers except chrome

This is how it looks in chrome:

And here is my 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;
}

Also html:

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

Sorry for such a long post i just wanted to make thing clear, anyways how do i fix this problem with chrome?

EDIT Here is the button http://shinigami.cd.lt/media/images/search_button.jpg

input is done by css no image used.

Answer 1

The size of your image is wrong.

The height of your image has to be:

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

The corrected CSS can be found here (applied zoom for debugging purposes): http://jsfiddle.net/BJJ38/2/

To make sure that the input elements look as expected, you have to explicitly define the padding-top and -bottom properties. Merged with your padding-left , the following property shows up:

padding: 0 0 0 3px;

Also, you have to define a width for a consistent look. For example:

width: 50px;

An alternative approach would be placing the button inside the input field, and extending the right padding, so that the outline on focus looks better: http://jsfiddle.net/BJJ38/3/