Why are the input elements of this form appearing vertically in ie7 but horizontally in ff and chrome?

Question

The question is as the title indicates. Code:

<form action="results.php" style="" target="_top" method="post">
<input type="text" name="search_area" id="username_input" class="search_box" >
<input type="image" onmouseout="this.src='resources/images/button_search_a.png'" onmouseover="this.src='resources/images/button_search_b.png'" src="resources/images/button_search_a.png" value="" class="searchbutton1">
</form>

I would like the input field and the button horizontally aligned as it appears in ff and chrome.

    .search_box{ 
 background-color: #FFFFFF;
border: 1px solid #CCCCCC;
color: #C0C0C0;
font-size: 10px;
font-weight: bold;
height: 17px;
margin-left: 10px;
margin-top: 12px;
padding-left: 3px;
right: 8px;
width: 234px;
}

.searchbutton1 {
height: 25px;
margin-top: 6px;
width: 100px;
}

And the form is lying inside a div of width 350px.

Answer 1

It might be due to different css default values across browsers. You might want to try a css reset. There's a load of different ones on the internet, but one of them is over at meyerweb