Question

I have this CSS but my text is correctly showing in Google Chrome and Ie; but not firefox. I 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 anyone recommend ways to get this to show?

HTML:

<form method="post" action="CheckCredentials.php">
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:

Answer 1

The problem is the specified height, if you remove the height parameter from the input the problem is solved.

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

It was set to border-box which calculates padding within the specified height and width and 13 < 9+8 (top and bottom padding) so there wasn’t space for the actual content(text). If you need to use specified height the best solution is to use:

box-sizing:content-box;
-moz-box-sizing:content-box; /* Firefox */
-webkit-box-sizing:content-box; /* Safari */

This will calculate the padding of the element outside of the specified height so now the actual height of the input will be 13+9+8px.