Why does IE make password boxes smaller than text boxes?
HtmlCssInternet ExplorerRenderingHtml Problem Overview
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?
Html Solutions
Solution 1 - 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>
Solution 2 - Html
You could append a fixed width for all inputs on the current page:
<style type="text/css">
input {
width: 10em;
}
</style>
Solution 3 - Html
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.
Solution 4 - Html
If you include the jQuery library in your page(s), you can use the following code to:
"When the document is fully loaded, take the first input element with type='text', and apply it's height and width to all input elements with type='password'".
I tested this on IE7 only, and it worked like a charm.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='password']").height($("input[type='text']").height());
$("input[type='password']").width($("input[type='text']").width());
});
</script>
This is a generalized answer (taking the first element that matches input[type='text']). You can get a reference to a particular element that you want to match, and then get a reference to one or more password boxes with some other jQuery selector. Have a look at the documentation for getting elements by id or a group of elements by a common css class or xpath-type expression:
Solution 5 - Html
Setting the width on textboxes will solve but I assume that's not what you want.
Try setting the min-width on input[type=text], input[type=password] to something greater than the default for textboxes. You'll probably need http://deanedwards.me.uk 's IE8 script to make those selectors work.
Solution 6 - Html
The font size is irrelevant. as seen in this test here: http://build.jhousemedia.com/ie_test.php
I wish I could give you a solid answer as to why but the work around is to apply a fixed width to it.