How can I make the ASP.Net Login control render correctly in Internet Explorer 7?

Question

I'm using an ASP.Net Login control in my application. In Chrome, Firefox, and IE 9, everything works ok. But we still have users on IE 7, and everything is NOT OK for them; the Login control's "UserName" box doesn't display, so they just have to guess at where to start typing in their username (see screen cap).

I've already tried converting the control to a Template and playing with the padding, etc. The control renders as a nested table, like so:

<asp:Login ID="UserLogin" runat="server" OnLoggedIn="UserLogin_LoggedIn" 
  DisplayRememberMe="false" UserNameLabelText="Username">
  <TextBoxStyle CssClass="round" />
  <TitleTextStyle Font-Bold="True" Font-Size="Large" />
  <LabelStyle Font-Bold="True" />
  <LayoutTemplate>
    <table cellpadding="1" cellspacing="0" style="border-collapse:collapse;">
      <tr>
        <td>
          <table cellpadding="5">
            <tr>
              <td align="center" colspan="2" style="font-size:Large;font-
                weight:bold;">Log In</td>
            </tr>
            <tr>
              <td align="right" style="font-weight:bold;">
                <asp:Label ID="UserNameLabel" runat="server" 
                  AssociatedControlID="UserName">Username:</asp:Label>
              </td>
              <td>
                <asp:TextBox ID="UserName" runat="server" CssClass="round" Width="100">
                </asp:TextBox>
                <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" 
                  ControlToValidate="UserName" ErrorMessage="User Name is required." 
                  ToolTip="User Name is required." ValidationGroup="UserLogin">*
                </asp:RequiredFieldValidator>
              </td>
            </tr>
            <tr>
              <td align="right" style="font-weight:bold;">
                <asp:Label ID="PasswordLabel" runat="server" 
                  AssociatedControlID="Password">Password:</asp:Label>
              </td>
              <td>
                <asp:TextBox ID="Password" runat="server" CssClass="round" 
                  TextMode="Password" Width="100"></asp:TextBox>
                <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" 
                  ControlToValidate="Password" ErrorMessage="Password is required." 
                  ToolTip="Password is required." ValidationGroup="UserLogin">*
                </asp:RequiredFieldValidator>
              </td>
            </tr>
            <tr>
              <td align="center" colspan="2" style="color:Red;font-weight:bold;">
                <asp:Literal ID="FailureText" runat="server" EnableViewState="False">
                </asp:Literal>
              </td>
            </tr>
            <tr>
              <td align="right" colspan="2">
                <asp:Button ID="LoginButton" runat="server" CommandName="Login"
                  Text="Log In" ValidationGroup="UserLogin" />
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </LayoutTemplate>
  <FailureTextStyle Font-Bold="True" />
</asp:Login>

Does anyone have any ideas?

UPDATE: Adding ie7-js to the mix made no difference at all. So I removed it and then tried removing the CssClass="round" from the Username and Password text boxes; that was the culprit. I don't know what in jquery.corner is causing the problem, but all it means is my login page will have square corners and the rest of the application will have rounded corners - I can live with that.

Answer 1

I'm going out on a limb here and saying that this is a CSS issue.

You're referencing a CssClass called round - Ideally we would need to see that first.

Though I am going to guess you have a .round:focus {} too? to style the currently focused textbox. If so, this isn't supported in less than I.E 8 and will likely have some funky behaviour...

If this is the case, then check out ie7-js to help you gain missing support.