Question

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.

Answer 1

Add float property and it will works.

.search input.btn {
    width:70px;
    height: 19px;
    position: relative;
    float: left;
    cursor:pointer;
    display: inline-block;
    cursor: hand; /* cross browser */
    background: #DDDDDD url(images/search.gif) no-repeat top right;
}

​EDIT:

Example