In Internet Explorer, the password field is a bit smaller than a regular textfield, causing them not to line up neatly. A very annoying little bug that messes up your page layout.
Firefox, Chrome and Safari behave nicely here.
The problem is caused by the font type Internet Explorer uses for it’s password field. This is often different than the other fields. I found a simple trick to make them equal size: set the same font on all the fields with CSS.
The easy way is to put the following code in your HTML page header:
<style type="text/css">
input
{ font-family: sans-serif; }
</style>Now, all input items on the page have the same font, making sure that Internet Explorer renders them with equal length.
In case you’re wondering where the name sans-serif comes from, check out an interesting explanation here of the classification of fonts.
