css - Text appears in Chrome but not firefox? -

css - Text appears in Chrome but not firefox? -

i have css text correctly showing in google chrome , ie; not firefox. cannot figure out why.

input[type="text"] { width: 274px; border: 1px solid #333; background-color: #181818; padding-top: 9px; color: #777; height: 13px; padding-left: 4px; padding-bottom: 8px;} input[type="password"] { width: 274px; border: 1px solid #333; background-color: #181818; padding-top: 9px; color: #777; height: 13px; padding-left: 4px; padding-bottom: 8px; }

can recommend ways show?

html:

<form method="post" action="checkcredentials.php"> fellow member login <br> username: <br><input type="text" name="username"> <br><br> password: <br><input type="password" name="password"> <br><br> <input type="submit" name="login" value="login!"> </form>

screenies

firefox:

chrome:

the problem specified height, if remove height parameter input problem solved.

alternative (better imo) solution: problem box-sizing property (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp)

it set border-box calculates padding within specified height , width , 13 < 9+8 (top , bottom padding) there wasn't space actual content(text). if need utilize specified height best solution use:

box-sizing:content-box; -moz-box-sizing:content-box; /* firefox */ -webkit-box-sizing:content-box; /* safari */

this calculate padding of element outside of specified height actual height of input 13+9+8px.

css cross-browser