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" />