5

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) https://i.stack.imgur.com/tpMDa.png

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

Thanks!

Jonathan
  • 320
  • 1
  • 10
  • 1
    I had the same problem on my website. I solved it by loading a different stylesheet for IE. See http://stackoverflow.com/questions/3541982/apply-css-rules-if-browser-is-ie – Bart Jan 10 '13 at 15:33
  • 1
    try setting a padding value. – dezman Jan 10 '13 at 15:33
  • reset css files are sometimes used to have a "start consistant" point that makes the base the same - for instance the default for 1em can vary from browser to browser. – Mark Schultheiss Jan 10 '13 at 15:40
  • YOUR code on my IE8 looks exactly like on Firefox: http://jsfiddle.net/mnZgS/ – Andrea Ligios Jan 10 '13 at 16:05

3 Answers3

1

Did you try setting values for padding?

Vincent Cohen
  • 878
  • 7
  • 28
  • I just removed the height attribute and added padding to the top and bottom of the input field and it looks much better. Thanks! – Jonathan Jan 10 '13 at 16:10
1

you can try box-sizing to border-box, but there is no support for ie7 for that.

input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
Dziad Borowy
  • 12,368
  • 4
  • 41
  • 53
0

Use line-height in addition to height. 

.login-input input
{
  width: 250px;
  height: 14px;
  line-height: 14px;
}
A. Gilfrin
  • 302
  • 1
  • 8