Stylesheet Walkthrough
I am going through the Visual Studio Walkthrough -
Working with Cascading Style Sheet Styles in Visual Web Developer. I have followed this chapter closely, but have not been able to get the code to work under Firefox or IE.
Here's what I have noticed...putting the following line of code in the header, the web page does not seem to use the stylesheet:
<link href="dark.css" type="css/text" rel="stylesheet" runat="server" id="stylesheet" />
If I remove the runat= and id= properties, then the browser will use the stylesheet, but then, of course, the server-side switching of stylesheets will not occur, thus defeating the purpose of the walkthrough.
Has anyone else run into this problem?
One clue I have - in the walkthrough documentation on page ms-help://MS.VSExpressCC.v80/MS.NETFramework.v20.en/dv_vwdcon/html/21c5bc35-28f1-43a4-8d1d-c15fe6f6233f.htm it says
| <link href="dark.css" type="css/text" rel="stylesheet" runat="server" id="stylesheet" /> |
Adding these two elements makes the<link> element into a server control that you can program using server-based code.
Notice that it says thesetwoelements,but there is only one element shown in the documentation, so that may be the source of the problem.
[1753 byte] By [
RobertB] at [2007-12-17]
Robert,
The text that you quote ("adding these two elements") refers to the "runat" and "id" attributes. It's confusing the way it's written, since the paragraph above the code fragment calls them attributes.
Anyway, I worked my way through this walkthrough and it worked for me. I've attached an ASPX page that will switch between two style sheets named "dark.css" and "light.css" in the same directory as the page.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void SwitchStylesheets(object sender, EventArgs e)
{
if (radioDark.Checked)
{
stylesheet.Href = "dark.css";
}
else if (radioLight.Checked)
{
stylesheet.Href = "light.css";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Switch Test</title>
<link href="dark.css" rel="stylesheet" type="text/css" runat="server" id="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButton ID="radioDark" runat="server" AutoPostBack="true" Checked="true" GroupName="grpSelectStyleSheet" Text="Dark" OnCheckedChanged="SwitchStylesheets" />
<asp:RadioButton ID="radioLight" runat="server" AutoPostBack="true" Checked="false" GroupName="grpSelectStyleSheet" Text="Light" OnCheckedChanged="SwitchStylesheets" />
</div>
</form>
</body>
</html>
I had exactly the same problem, and I'm using language="VB", so the C# example posted here doesn't help. I've checked my code carefully and there seems to be no reason for it not to work... the "Light.css" and "Dark.css" text DOES get changed in the link href, but the css commands do not take effect. It's as if the css rendering engine isn't working when runat the server.
...jon
Sorry, but -- no -- MSChuck's post did not help. He responded with C# and my question is about VB... there's still an issue with the example provided in the Guided Tour Walkthrough just not working.... I'll see if the ASP.NET forums can provide anything better...jon
I have a simple answer to why it doesn't work. It's because it's not possible. I ran across this Tutorial and couldn't understand why MS has it posted, since it doesn't work. The proper way to do this would be along these lines.
<link rel="stylesheet" type="text/css" runat="server" id="stylesheet" />
and then from your code use
stylesheet.Attributes.Add("href","url/style.css");
I'm assuming VB works the same way.
