Chrome float: right image not aligning - google-chrome

Question

I have this search button that is really giving me a hard time. I am trying to get it to line up properly with the search input area and when I finally got it to work in Firefox, it decided to get all weird in Chrome. Its like something is pushing the button down when viewed in Chrome.
Here is my HTML:
<div id="searchCon">
<form role="search" method="get" id="searchform" class="searchform" action="http://somesite.com/">
<div>
<label class="screen-reader-text" for="s">Search Our Site:</label>
<input type="text" value="" name="s" id="s">
<input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1; float: right;">
</div>
</form>
</div>
Here is my CSS:
#searchCon {
float: right;
display: inline-block;
height:37px;
padding: 0px 10px 10px 280px;
color:#2a2a2a;
}
I have been reading tons of forums, articles, etc and cannot get this little button to work properly in Chrome.
Please help me out!

Answer 1

Try this:
HTML:
<div id="searchCon">
<form role="search" method="get" id="searchform" class="searchform" action="http://somesite.com/">
<div style="float:left">
<label class="screen-reader-text" for="s">Search Our Site:</label>
<input type="text" value="" name="s" id="s" />
</div>
<div style="float:right;padding-top:2px">
<input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1; " />
</div>
</form>
</div>
CSS:
#searchCon {
float: right;
display: inline-block;
height:37px;
padding: 0px 10px 10px 0px;
color:#2a2a2a;
}