Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 756
Patrick McElhaney Avatar asked Mar 27 '09 15:03

Patrick McElhaney


People also ask

How do I make my textbox smaller?

Resize a text box Select the text box. Select one of the handles and drag until the text box is the size you want.

How to display text in input field in HTML?

The line <input type="text"> creates a single line text input field, where the user can type any text input.

Which text property is used to enter the test as password?

To create a password text box Set the PasswordChar property of the TextBox control to a specific character. The PasswordChar property specifies the character displayed in the text box.


2 Answers

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>      
like image 149
Konstantin Tarkus Avatar answered Oct 13 '22 16:10

Konstantin Tarkus


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

<style type="text/css"> input {     width: 10em;     } </style> 
like image 44
Darin Dimitrov Avatar answered Oct 13 '22 16:10

Darin Dimitrov