position of website elements - html

Question

I have an issue with rendering my website for IE, Chrome and Opera. In Firefox the positioning works well:
while in the other browsers it looks like crap:
I have tried several positioning and padding options, but no luck. The problems appeared as I replaced the drop down menu with a jQuery replacement to enhance it graphically. The original dropdown is still there but with the css-option "display: none". I'd be thankful for a hint!
Here is the css:
This is the big blue box
.searchHomeForm a, .searchHomeForm a:hover {
color:#000000;
}
A invisible box around the three elements
div.searchHomeForm , .searchform {
height: 37px;
margin-left: auto;
margin-right: auto;
}
The white search bar
.search_bar {
position: inherit;
height: 25px;
letter-spacing: 0.02em;
line-height: 25px;
padding: 9px 0 0px 9px;
width: 390px;
border: 1px solid #95B6D6;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.11) inset;
border-radius: 0.25em 0 0 0.25em;
}
the jQuery Dropdown replacement
#searchformReplacement {
background: #EBEBEB;
padding: 0px 1px 5px 0;
margin-bottom: 3px;
border-top: 1px solid #95B6D6;
border-bottom: 1px solid #95B6D6;
width: 109px;
position: inherit;
}
the find button
.find_button {
background: url("../images/lupevufindsearchsubmit1.png") no-repeat scroll #bBbBbB;
-moz-border-radius: 0.25em;
border-radius: 0 0.25em 0.25em 0;
position: inherit;
height: 36px;
line-height: 36px;
margin: 0px 0 3px -1px;
padding: 4px 10px 4px 10px;
width: 60px;
border-top: 1px solid #95B6D6;
border-right: 1px solid #95B6D6;
border-bottom: 1px solid #95B6D6;
border-left: none;
box-shadow: 2px 2px 5px rgba(76, 133, 187, 0.50) inset;
transition: all 0.2s ease-in-out 0s;
}

Answer 1

Try removing position: inherit from the .search_bar {}, #searchformReplacement {}and .find_button {} add display:inline-block for each
or add display:inline and float:left for each. You may have to clear floats if you use float:left

Answer 2

maybe use float: left; on the three elemetns next to each other?

Answer 3

I made you a little example to have the required position, I'm using the inline-block propriety (and I love it) :
Html
<div id="container">
<input type="text" class="inline-block" />
<div class="inline-block">
Your custom select
</div>
<button type="submit" class="inline-block">Search</button>
</div>
CSS
.inline-block {
display:inline-block;
*display:inline; /*IE hack*/
*zoom:1; /*IE hack*/
}
#container {
background:lightBlue;
width:300px;
margin:0 auto;
text-align:center;
}
See the working fiddle !

Answer 4

Yes, clearing your floats are important as madhushankarox has pointed out. But you don't always need to use floats, especially not in your case. Plus here's an extra bonus if you ever need to place your form into a liquid layout page. It should proportion itself out equally on most screens that are wide or thin.
CSS
/*the blue rounded box*/
#bluebox {
padding:3% 5%;
margin:0 25%;
background:#d0dcea;
border:solid 1px #b7c2d2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.fieldset-search {
text-align:center;
}
/*The white search bar*/
.input-search {
padding:5px;
margin:0;
width:50%;
vertical-align: baseline;
border: solid 1px #b7c2d2;
background: #fff;
outline: 0;
}
/*the jQuery Dropdown replacement*/
.list-search {
padding:4px;
margin:0 0 0 -5px;
}
/*the find button*/
.submit-search {
padding:4px 10px;
margin:0 0 0 -5px;
}
HTML
<div id="bluebox">
<div class="fieldset-search">
<input type="text" name="search" class="input-search">
<select name="list" class="list-search"><option></option></select>
<button type="search" class="submit-search">Go</button>
</div>
</div>