My inquiry is straightforward. Here's the code snippet in question:
<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'm looking to have the input field and button aligned horizontally, similar to how they appear in Firefox 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;
}
The form is contained within a div with a width of 350px.