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?
Resize a text box Select the text box. Select one of the handles and drag until the text box is the size you want.
The line <input type="text"> creates a single line text input field, where the user can type any text input.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With