I'm working on a
web application that uses
ASP.
NET 3.5 and C#. Structurally, I have a master page with a menu control on it. The control serves as my navigation, and it gets its items from a SiteMapDataSource control and a corresponding
Web.sitemap file.
The problem is that some styles do not render properly when you specify the CssClass property. More specifically, the selected and hover styles don't respond
to css styles. Consider the code below:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="
Site.master.cs" Inherits="
Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>A webpage</title>
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<asp:Menu
ID="navMenu"
Orientation="Horizontal"
StaticMenuStyle-CssClass="staticMenu"
StaticMenuItemStyle-CssClass="staticMenuItem"
StaticSelectedStyle-CssClass="staticSelectedItem"
StaticHoverStyle-CssClass="staticHoverItem"
runat="server">
</asp:Menu>
<asp:SiteMapDataSource ID="srcSiteMap" runat="server" ShowStartingNode="false" />
<br />
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Suppose I had a corresponding .css file with the following:
.staticMenuItem { background-color:Red; }
.staticSelectedItem { background-color:Green; }
.staticHoverItem { background-color:Blue; }
What will happen is that my item backgrounds will properly be red, but my selected item will not be green and the item I'm hovering my mouse over will not be blue. This seems true regardless of whether or not I include the style
in the head of the master page or
in an external file
in default theme as specified
in the
web.config file.
If I specify the styles
in the
asp.
net xml like so:
<asp:Menu
ID="navMenu"
Orientation="Horizontal"
runat="server">
<StaticSelectedStyle
BackColor="Green"
Font-Underline="True"
Font-Bold="True" />
<StaticHoverStyle
BackColor="Gray" />
</asp:Menu>
It appears
to work properly
in Firefox, but the style is never embedded
in the html
in Internet Explorer. Odd.
Does anybody have any insight into what is causing this problem and
how to neatly work around it? I'm aware I might be able
to programmically determine the current page and select the corresponding menu item manually so it receives the proper style class, but before I resort
to hacking C# and Javascript together
to fix this functionality, I'm open
to ideas. Thanks!
