div background does not show properly in chrome - html

Question

I'm using float: left; and float: right; to put two div-containers in one row, the left one holds an input bar, the right one holds a small background image (search button).
It's showing fine in Opera & Firefox, MSIE 9.0+ but when I view it in chrome the right container's background image is slightly off position (shifted downwards by a few pixels).
I set the background color to red to highlight the issue:
screenshot
index.php outtake:
<div class="header_inner_right">
<form id="search_bar" method="post" action="" onsubmit="return checkSearchQuery();">
<div class="left">
<input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer"
onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
</div>
<div class="right">
<input id="search_button" src="images/search_button.gif" type="submit" value="">
</div>
</form>
</div>
index_chrome.css (used if php script detects chrome browser):
#charset "ISO-8859-1";
#search_bar {
width: 450px;
height: 37px;
background-color: red
}
#search_bar #search_field {
border: 0px;
width: 365px;
height: 37px;
padding-left: 20px;
padding-right: 20px;
background-image: url(../images/search_field.gif);
background-repeat: no-repeat;
font-weight: bold;
color: #c0c0c0;
background-color: #ffffff
}
#search_bar #search_button {
cursor: pointer;
border: 0px;
outline: none;
height: 37px;
width: 45px;
background-image: url(../images/search_button.gif);
background-repeat: no-repeat
}
How to fix it and adjust the y-position of the magnifying-glass background image so its perfectly aligned with the left div's background image and fully concealing the red background of the right div container?
EDIT: http://jsfiddle.net/YcraM/
Sorry, forgot about JSFiddle!

Answer 1

This might not be the answer you want to hear, but it's pretty much impossible to make most input elements look identical cross browsers. I urge you to fashion the submit button from a div element. Example:
<div class="left">
<input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer"
onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
</div>
<div class="right">
<div id="search_button"></div>
</div>
Style the div with css to your liking - remember to use the :hover and :active pseudo classes. Then, using for example jQuery, make it functional like this:
$('#search_button').on('click', function(e) {
$(e.currentTarget).closest('form').submit();
});

Answer 2

I've tested it in Chrome 21 and FF 14, it seems setting line-height:0px; fixes the issue.
div.right {
float: right;
line-height:0px;
}
div.left {
float: left;
line-height:0px;
}
http://jsfiddle.net/YcraM/3/
I haven't tested in other browsers, so forgive me if this isn't the best solution.

Answer 3

you can add float:right (or left) to #search_bar #search_button, that fix the issue as well