Why does IE make password boxes smaller than text boxes?

html css internet-explorer rendering

Patrick McElhaney · Mar 27, 2009 · Viewed 17.6k times · Source

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?

Answer

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>

Why does IE make password boxes smaller than text boxes?

Answer

Related questions