Have the following searchbox image:
With the following code and css:
#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="zoek..." class="box" />
<input name="btn" type="button" class="btn" />
</form>
</div>
In firefox it looks ok, but in ie and chrome the button "Zoek" goes down a bit, see image
In my opinion the css is ok. but can't find where it goes wrong.
