0

I have an application that has an initial login page that has a user name and password input box. This page works fine in IE 7, Safari , Firefox 4 & 5 but not in IE 8 and 9. In IE 8/9 the user name and password display with different size input boxes when you adjust the zoom percent. While doing some testing I noticed in IE 8/9 the Document Mode is in Quirks Mode. So I tried setting the Document Mode in IE 9 to IE 9 Standards mode and the page displays correctly. However in IE 8 it has no affect. The only thing I have been able to get to work is to redefine the font-family in the style sheet for the input boxes. This works for IE 7,8 and 9 and also Safari and Firefox.

I have also tried setting the DOCTYPE and meta tags but none of those combinations seem to work in IE 8.

I included a test stylesheet and html below that reproduces the problem.

Does anyone know why IE 8/9 would require this ? Is there another way to handle this other than redefining the font-family ?

Thank you.

The stylesheet below works in IE 7, Safari and Firefox 4 & 5. In IE 8/9 it causes the user name and password to display with different lengths unless I use the commented out line:

stylesheet:

body                   { font-size: x-small; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;} 


form                    { font-size: 100%; }
input                   { font-size: 110%; }
/*input                   { font-size: 110%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }*/
INPUT.TEXT              { font-size: 100%; }
select                  { font-size: 110%; }
textarea                { font-size: 110%; }

html:

<html>
<head>                 
<title>Login</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body>                  
<table>                 
<tr><td>User&nbsp;Name: </td><td><input type=text name=username size=20 value=""></td></tr>
<tr><td>Password: </td><td><input type=password name=pass size=20></td></tr>
<tr><td>&nbsp;</td><td><input type=submit value=Login></td></tr>
</table>                
</body>
</html>
Bruce
  • 81
  • 1
  • 6

1 Answers1

0

Your input length is based on your font-size. But many form element do not inherit your font-family. Test it with a funky font (Comic Sans MS) and a big font-size.

Related (except the first answer is wrong, input type do not inherit font-family).

You could set your input size in CSS (width:200px).

Little note : INPUT.TEXT points to no element. .text is a class.

Community
  • 1
  • 1
Kraz
  • 6,910
  • 6
  • 42
  • 70
  • Okay. Thanks. I guess I still don't see why the font-family appears to be inherited in IE 7, Safari and Firefox but in IE 8/9 you need to specify the font-family for input. – Bruce Jun 14 '11 at 17:32
  • It's not inherited unless you force it. Play with [this jsFiddle](http://jsfiddle.net/Vz78R/) and you'll understand. I can't test for IE7, but I'm pretty sure it's a matter of rendering font differently. So yeah, for IE, you gotta redefine fonts attribute... – Kraz Jun 14 '11 at 18:57