Custom Styling for ASP Membership Login in Visual Studio 2008
I am experimenting with customizing the ASP:Login control by converting it into a template. Here is the updated markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="My.Login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>My Login</title>
<link href="Style.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Login ID="Login1" runat="server">
<LayoutTemplate>
<table border="0" cellpadding="1" cellspacing="0"
style="border-collapse:collapse;">
<tr>
<td>
<table border="0" cellpadding="0">
<tr>
<td class="normalAAText" align="center" colspan="2">
Log In</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" CssClass="normalAAText" >User Name:</asp:Label>
</td>
<td>
<asp:TextBox ID="UserName" CssClass="normalAAText" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server"
ControlToValidate="UserName" ErrorMessage="User Name is required."
ToolTip="User Name is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right" class="normalAAText">
<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" CssClass="normalAAText">Password:</asp:Label>
</td>
<td>
<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server"
ControlToValidate="Password" ErrorMessage="Password is required."
ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td colspan="2">
<asp:CheckBox ID="RememberMe" CssClass="normalAAText" runat="server" Text="Remember me next time." />
</td>
</tr>
<tr>
<td align="center" colspan="2" style="color:Red;">
<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="Login1" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:Login>
</div>
</form>
</body>
</html>
While the Visual Studio IDE shows the page correctly formatted, the rendered version lacks styling as expected.
I have tried applying inline styles to individual controls, though it defeats the purpose of using a stylesheet. The linked CSS file is functional, evident from the styled display in the IDE.
Any suggestions or insights are welcome.
Below is the CSS file for reference. Thank you.
Sincerely, Edward
body
{
/* CSS styles for body */
}
/* Other CSS styles for grid-view, header, normalAAText, linkButton, etc. */