Why does IE make password boxes smaller than text boxes?

See the simple form below. It's just a text box on top of a password box. If you look at it in Internet Explorer 7 (and 8, and probably others) the text box is 10 pixels wider than the password box.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>IE Text vs. Password test</title>
</head>
<body>                 

<form action="test"> 
  <p>
    <input type="text"><br>  
    <input type="password">      
  </p>
</form>          

</body>
</html>

Is there a way to "fix" that globally, either through CSS or by adding something to the HTML?

Because different font is used in those types of fields.

The fix is simply to specify that all inputs use the same font.

<style type="text/css">
  input {
      font-family: sans-serif;                
  }
</style>

You could append a fixed width for all inputs on the current page:

<style type="text/css">
input {
    width: 10em;    
}
</style>

The problem is Internet Explorer's default encoding. Internet Explorer has an issue displaying the field lengths the same when using UTF-8 encoding. In IE, try changing the encoding to "Windows" (Page->Encoding in IE 8) while viewing a problem page and you'll see exactly what I mean.

Why does IE make password boxes smaller than text boxes?

Related

Recent Posts