HTML text and password input fields have difference size internet explorer

Question

I am using this form setting for my login form :

<tr>
     <td class="label"> Username:</td>
     <td> <input id="id_username" type="text" name="username" maxlength="30" /></td>
</tr>
<tr>
     <td class="label"> Password:</td>
     <td> <input a="text" type="password" name="password" id="id_password" /></td>
</tr>

when using firefox both input boxes having the same size. However when I am on IE 9 , the password field is smaller.

What is the best way to get rid of this behavior ?

Answer 1

Use CSS to apply a fixed width value to the elements, for example:

.fixed-input {
    width: 150px;
}
....
<input class="fixed-input" id="id_username" type="text" name="username" maxlength="30" />

Answer 2

i was having the same problem. i added the width style and they still looked different.

it turned out that the padding and border color were also not the same for text and password inputs and this was causing the difference.

make sure you set the following style attributes for both password and text inputs:

width: 200px;
font-family: sans-serif;
font-size: 15px;
padding: 3px;
border: 1px solid black;

Answer 3

The best way would be to define style for this elements and set appropriate width. It may be possible, that maxlength attribute increases size of user field.