Căsuța de căutare cu imagini ciudate în cauză, de exemplu

Aveți următoarea imagine de căutare:

enter image description here

Cu următorul cod și 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>

În firefox pare ok, dar, de exemplu, cromul butonul "Zoek" coboară puțin, vezi imaginea

enter image description here

În opinia mea, CSS este ok. dar nu poate găsi unde merge prost.

0
utilizați "absmiddle" pentru imagine
adăugat autor sree, sursa

1 răspunsuri

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:

Exemplu

0
adăugat