Элемент управления меню на главной странице не использует стили CSS - PullRequest
Новая
       29

Элемент управления меню на главной странице не использует стили CSS

0 голосов
/ 03 июня 2010

Я работаю над веб-приложением, использующим ASP.NET 3.5 и C #. Конструктивно у меня есть главная страница с элементом управления меню. Элемент управления служит моей навигацией и получает свои элементы из элемента управления SiteMapDataSource и соответствующего файла Web.sitemap.

Проблема в том, что некоторые стили не отображаются должным образом при указании свойства CssClass. В частности, выбранные стили и стили наведения не отвечают стилям CSS. Рассмотрим код ниже: 

<%@ 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>

Предположим, у меня был соответствующий файл .css со следующим: 

.staticMenuItem { background-color:Red; }
.staticSelectedItem { background-color:Green; }
.staticHoverItem { background-color:Blue; }

Что произойдет, так это то, что фон моего предмета будет красным, но выбранный предмет не будет зеленым, а предмет, над которым я наведу курсор мыши, не будет синим. Это кажется верным независимо от того, включаю ли я стиль в заголовок главной страницы или во внешний файл в теме по умолчанию, как указано в файле web.config.

Если я укажу стили в xp asp.net примерно так: 

<asp:Menu
    ID="navMenu"
    Orientation="Horizontal"
    runat="server">
<StaticSelectedStyle 
    BackColor="Green"
    Font-Underline="True"
    Font-Bold="True" />
<StaticHoverStyle 
    BackColor="Gray" />
</asp:Menu>

Кажется, он работает правильно в Firefox, но этот стиль никогда не включается в HTML в Internet Explorer. Одд.

Есть ли у кого-нибудь понимание того, что вызывает эту проблему и как аккуратно обойти ее? Я знаю, что мог бы программно определить текущую страницу и выбрать соответствующий пункт меню вручную, чтобы он получил правильный класс стилей, но прежде чем я прибегну к совместному взлому C # и Javascript, чтобы исправить эту функциональность, я открыт для идей .

Ответы [ 5 ]

4 голосов
/ 07 июня 2010

Довольно странно, когда я использовал код, предоставленный в свежем решении, он работал отлично. По-видимому, мое оригинальное решение использовало ASP.NET 4.0, и по какой-либо причине копирование приведенного здесь кода не сработало. Я попытался указать ASP.NET 3.5 в качестве компилятора в Visual Studio, и вот, это сработало. Когда я снова установил ASP.NET 4.0 в качестве компилятора, он заработал.

При ближайшем рассмотрении я вижу, что при преобразовании решения Visual Studio 2010 из ASP.NET 3.5 в ASP.NET 4.0 для свойства controlRenderingCompatibilityVersion устанавливается значение "true" в файле web.config. Это привело к тому, что элемент управления меню отображался как таблица (как в 3.5), а не как элемент списка (как в 4.0). Удаление этого свойства снова нарушило работу страницы, а установив для свойства элемента управления RenderingMode значение «table», исправили его.

Итак, в итоге, эта ошибка, по-видимому, существует только в ASP.NET 4.0 с элементами меню, отображаемыми в виде списков, по крайней мере, для меня. Если у кого-то еще есть понимание, я был бы рад услышать это.

2 голосов
/ 04 июля 2012

Возникла та же проблема, изменили web.config - controlRenderingCompatibilityVersion с 3.5 на 4.0, и проблема была решена.

Я думаю, что это произошло после добавления AjaxControlKit.

Это работает: 

<pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
    <controls>
        <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
    </controls>
</pages>
1 голос
/ 16 августа 2010

В ASP.NEt 4.0 он помещает фактический атрибут «selected» в класс тега a. Так что я сделал это с помощью CSS и убедился, что я устанавливаю размер тега, отступа и т. Д. Вместо li, и он работает как сон.

1 голос
/ 03 июня 2010

Я использую ту же среду разработки, что и вы, и могу меню, которое по умолчанию имеет красные пункты, которые становятся голубыми при наведении и зелеными выбран. Я встроил тему в файл web.config. Я использую IE 8. Может ли быть проблема с версией IE? Greetz

0 голосов
/ 03 июня 2010

Hover не работает в IE6 ... это может быть вашей проблемой. Это можно исправить с помощью JavaScript, хотя ... http://www.robspangler.com/blog/hover-pseudo-class-bug-fix-for-ie6/

...