https://stackoverflow.com/questions/23107618
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianA colleague has explained to me that the style sheet is a protected asset, which cannot be loaded until authentication. I've moved it into a folder for which anonymous access is permitted, and all works well.
CSS not being applied to rendered page but shows in IDE
-
04-07-2023 - |
Question
Visual Studio 2008 - ASP Membership Login control
I'm trying to style the ASP:Login control. I've converted it to a Template - here's the 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>
In the IDE the page looks like this:
However, when it's rendered it looks like this (i.e. no styling)
I can apply stying in-line for each control, but that rather defeats the object of a style sheet. It's clear that the CSS file is correctly linked otherwise the IDE wouldn't display my nice purple lettering!
Any thoughts?
The CSS file is below. Thanks
Edward
body
{
}
.grid-view
{
padding: 0;
border: 1px solid #333;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
font-size: 0.9em;
margin-left: 0;
margin-right: 0;
margin-top: 0;
}
.grid-view tr.header
{
background-color: #ADB0FF;
border-bottom: "1px solid #000";
color: #000000;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
height: 20px;
text-transform: uppercase;
}
.normalAAText
{
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
color: #6666cc;
font-weight: 700;
}
.header
{
background-color :#ADB0FF
}
.linkButton
{
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
color: Red;
font-weight: bold;
}
.grid-view tr.normal
{
background-color :#CECCFF;
border-bottom:"0px solid #000"; COLOR: #000000;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
FONT-SIZE:12px; TEXT-DECORATION: none; height:17px;
}
.grid-view tr.alternate
{
background-color:#A0A0FF; border-bottom:"1px solid #000"; COLOR: #000000;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
FONT-SIZE: 12px; height:17px; TEXT-DECORATION: none ;
}
.grid-view tr.normal:hover, .grid-view tr.alternate:hover
{
background-color :#BDDFF8; border-bottom:"0px solid #000"; COLOR: #000000;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif; FONT-SIZE:12px; TEXT-DECORATION: none; height:17px;
}
.btnSaveCancel
{
border-color: #B3CCE6;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
font-weight:bold;
border-bottom-style: double;
border-left-style: double;
border-right-style: groove;
border-top-style: groove;
border-bottom-width: 1;
border-left-width: 1;
border-right-width: 1;
border-top-width: 1;
text-align: center;
cursor: hand;
color: #000000;
}
a.logout
{
padding: 2px 5px;
color: #ffffff;FONT-SIZE: 12px;
text-decoration: none;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
}
a.logout:visited
{
padding: 2px 5px;
color: #ffffff;FONT-SIZE: 12px;
text-decoration: none;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
}
a.logout:hover
{
padding: 2px 5px;
color: #ffffff;FONT-SIZE: 12px;
text-decoration:underline;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
}
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
