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();
});