31 Aug, 2009
Formulier velden en line-height in FireFox probleem
Categoriën: crossbrowser |FireFox |form |hack |valid
FireFox is de neige browser die een probleem heeft als er line-height gebruikt word in formulier velden, en is altijd een offset van 2px aan de bovenkant, elke ander browser (zelfs IE6) rendert dit correct af.
Je kunt dit probleem oplossen door de FireFox 3 only hack te gebruiken:
Standaard CSS
CSS
#search-theme-form .form-text {
width: 124px;
height: 19px;
border: 1px solid;
border-color: #717171 #b4b4b4 #dadada #b4b4b4;
padding: 0 0 0 3px;
background: url(../images/search-bkg.gif) no-repeat top right;
line-height: 19px;
color: #9c9c9c;
font-size: 1.2em;
}
FireFox CSS
Volgende regel zet je het best direct nadien:
CSS
html>/**/body #search-theme-form .form-text,
x:-moz-any-link,
x:default {
height: 17px;
padding-top: 2px;
} /* Only FireFox 3 */