How to I make my input fields look the same across the browsers? [closed]

Question

I have a login page with two input fields. In Chrome, Firefox and IE10, they look great, but in IE 7, 8, 9, they are too thin. Here is the HTML and class for the fields.

HTML:

<div class="login-input">
<input data-val="true" data-val-required="Username is required." id="Username" name="Username" type="text" value="">
</div>

CSS:

.login-input input
{
width: 250px;
height: 14px;
}

This is how it looks in Chrome, Firefox, IE10 (correct look) http://i.imgur.com/6swf7.png

This is how it looks in IE 7, 8, 9 (incorrect look) http://i.imgur.com/ltzdG.png

Thanks!

Answer 1

Did you try setting values for padding?