Here is the searchbox image displayed:
With this code and css styling:
#searchcontainer {
margin: 40px 0 0 0;
}
.search {
float: right;
margin: 0;
padding: 0;
height: 21px;
width: 310px;
}
.search input,
.search button {
margin: 0;
padding: 0;
font-size: 0.9em;
color: #A7A9AC;
border: 0;
outline: none;
}
.search input.box {
margin: 0;
padding: 2px 5px 0 5px;
width:230px;
height: 19px;
background: #FFF url(images/search.gif) no-repeat top left;
}
.search input.btn {
margin: 0 0 0 -5px;
padding: 0;
width:70px;
height: 21px;
cursor:pointer;
cursor: hand; /* cross browser */
text-indent: -9999px;
background: #FFF url(images/search.gif) no-repeat top right;
}
<div id="searchcontainer">
<form id="searchform" class="search" method="post" action="#">
<input name="box" type="text" value="search..." class="box" />
<input name="btn" type="button" class="btn" />
</form>
</div>
It displays correctly in Firefox, but there is a slight alignment issue in Internet Explorer and Chrome with the "Search" button moving down slightly.
I have reviewed the css and believe it to be correct, but I am unable to identify where the issue lies.