Password and Text Boxes Are Not Of Equal Length

Why is the password field smaller than the input field in Internet Explorer 8? It’s the same in previous versions of the browser? I was recently working on a project that required authentication. I styled the login page. Everything looked wonderful. Perfect as a matter of fact, until I opened IE8. Wicked ugly. My main gripe really is, why is the password field smaller than the input fields?

I did a quick search online and found a solution.

You can style the input field to a certain width, like in this example.

input { width:12em; }

I’m using em instead px, because it’s probably more accurate.

But, styling the input field, like the one above, will make changes to every input field on the site. So, the quick and dirty way to style a login page, is to use inline CSS. In this example, we will use two input fields of text and passwords with inline styling.

<form>
<input type=’text’ name=’username’ style=’width:12em’ />
<input type=’password’ name=’password’ style=’width:12em’ />
</form>

So, there you have it. A quick and dirty solution to the uneven password and text input fields in Internet Explorer 8. If you have any other solutions, please let me know. I’ll be happy to hear about it.