Menu Control in Master Page fails to use CSS styles
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 pr开发者_JAVA技巧operly 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.
Quite odd, when I used the code I provided in a fresh solution, it worked perfectly. Apparently, my original solution was using ASP.NET 4.0, and for whatever reason, copying the code given here didn't work. I tried specifying ASP.NET 3.5 as the compiler in Visual Studio, and 'lo and behold, it worked. When I set ASP.NET 4.0 as the compiler once again, it worked.
Upon closer inspection, I see that transforming the Visual Studio 2010 solution from ASP.NET 3.5 to ASP.NET 4.0 set the controlRenderingCompatibilityVersion property to "true" in the web.config file. This had the effect of causing the menu control to render as a table (as it does in 3.5) instead of a list item (as it does in 4.0). Removing this property broke the page once more, and setting the menu control's RenderingMode property to "table" fixed it.
So, in summary, this bug only appears to exist in ASP.NET 4.0 with menu controls being rendered as lists, at least for me. If anybody else has further insight, I'd be happy to hear it.
Had the same issue, changed web.config - controlRenderingCompatibilityVersion from 3.5 to 4.0, and the problem was solved.
I think it happened after adding AjaxControlKit.
This works:
<pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
<controls>
<add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
</controls>
</pages>
I use exactly the same development environment like you, and I could produce a menu which has red items by default, which become blue on hovering and green when selected. I have embedded the theme in the web.config file. I use IE 8. Might it be a problem with the IE version? Greetz
In ASP.NEt 4.0 it puts the actual "selected" attribute in the class of the a tag. So what I did was target it with CSS and make sure that I was setting the size of my a tag, padding etc instead of the li and it works like a dream.
Hover does not work in IE6...this may be your problem. It can be fixed with javascript though...http://www.robspangler.com/blog/hover-pseudo-class-bug-fix-for-ie6/
加载中,请稍侯......
精彩评论