ASP.NET Textbox size differs when TextMode=Password

Question

I have a login page that has several textboxes on the page, one of them has the mode set to "password". This page worked previously but we've recently noticed (since an IE7 update) that the textbox that is specified as a password textbox is not as wide as the other textboxes on the page. If I remove the TextMode="Password", the textbox resizes to match the others.

I've checked for oddities on the page when the page displays using the IE developer toolbar, but it all looks ok.

The textbox code is fairly basic:

    <tr>
  <td>
    Username
  </td>
  <td>
    <asp:TextBox ID="txtUsername" runat="server" TabIndex="2"></asp:TextBox>
  </td>
</tr>
<tr>
  <td>
    Password
  </td>
  <td>
    <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" TabIndex="3"></asp:TextBox>
  </td>
</tr>

I've found one other person asking about this on the web and they fixed it by applying a css to all the input controls on the page, but I haven't managed to get that to work either.

Answer 1

The best way to ensure that all of your controls will be of the same size is via style (either inline or in css).

Answer 2

I've found that if you use the following CSS:

input, select { font-family: sans-serif; }

this will make the text and password boxes be the same width. The font-family does not have to be sans-serif, but it must be defined.

This may be a better solution as it seems to fix the issue rather than band-aid over it by using an explicit width in your CSS. You can now just use the default font settings of the browser by using the generic font families or be explcit if you have a particular font you are using for the page.

Answer 3

It may help if you provide a Width="" property to your textboxes. That should force them to match up in terms of width even those they have different text modes.