2010-06-02 6 views
0

ASP.NET 3.5 및 C#을 사용하는 웹 응용 프로그램에서 작업하고 있습니다. 구조적으로, 나는 그것에 메뉴 컨트롤을 가진 마스터 페이지를 가지고있다. 컨트롤은 내 탐색 역할을하며 SiteMapDataSource 컨트롤과 해당 Web.sitemap 파일에서 항목을 가져옵니다.마스터 페이지의 메뉴 컨트롤에서 CSS 스타일을 사용하지 못했습니다.

CssClass 속성을 지정할 때 일부 스타일이 제대로 렌더링되지 않는 것이 문제입니다. 더 구체적으로 말하자면, 선택한 스타일과 호버 스타일은 CSS 스타일에 응답하지 않습니다. 나는 다음에 해당 .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> 

가정하자 : 무슨 일이 일어날 지

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

내 항목 배경이 제대로 빨간색,하지만 것입니다 내 선택 항목을하지 않습니다 아래의 코드를 살펴 보자 초록색이어야하고 마우스를 가져 가면 파란색으로 표시되지 않습니다. 이것은 마스터 페이지의 헤드에 스타일을 포함할지 또는 web.config 파일에 지정된 기본 테마의 외부 파일에 스타일을 포함할지 여부와 상관없이 사실입니다.

내가 지금처럼 asp.net XML의 스타일을 지정하는 경우는 :

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

파이어 폭스에서 제대로 작동하려면 나타나지만 스타일은 Internet Explorer에서 HTML에 포함되지 않습니다. 이상한.

누구에게이 문제의 원인에 대한 통찰력이 있으며 어떻게 해결할 수 있습니까? 나는 프로그래밍 방식으로 현재 페이지를 결정하고 해당 메뉴 항목을 수동으로 선택하여 적절한 스타일 클래스를받을 수 있음을 알고 있지만이 기능을 수정하기 위해 C# 및 Javascript를 함께 해킹하기 전에 아이디어를 공개합니다. .

답변

4

새로운 솔루션으로 제공 한 코드를 사용했을 때 이상하게도 이상하게 작동했습니다. 분명히, 내 원래의 솔루션은 ASP.NET 4.0을 사용하고 있었고 어떤 이유로 든 여기에 주어진 코드를 복사하는 것은 효과가 없었습니다. 저는 Visual Studio에서 ASP.NET 3.5를 컴파일러로 지정하려고 시도했습니다. 컴파일러로 ASP.NET 4.0을 다시 한 번 설정하면 효과적입니다.

자세히 살펴보면 Visual Studio 2010 솔루션을 ASP.NET 3.5에서 ASP.NET 4.0으로 변환하면 web.config 파일에서 controlRenderingCompatibilityVersion 속성이 "true"로 설정되어있는 것을 확인할 수 있습니다. 이것은 메뉴 컨트롤을 (4.0에서와 같이) 목록 항목 대신에 (3.5에서와 같이) 테이블로 렌더링하게하는 효과가있었습니다. 이 속성을 제거하면 페이지가 다시 손상되고 메뉴 컨트롤의 RenderingMode 속성을 "table"로 설정하면 해결됩니다.

요약하면이 버그는 최소한 ASP.NET 4.0에서 메뉴 컨트롤이 목록으로 렌더링되어있는 것으로 나타납니다. 다른 사람이 더 깊은 통찰력을 가지고 있다면, 나는 그것을 듣게되어 기쁩니다.

+0

더 이상한,이 문제가 있지만 내 프로덕션 환경에서만 - 두 환경 모두 .NET 4가 있지만 프로덕션에서는 IIS7을 사용합니다. - 해결할 수있는 유일한 차이점이 있습니다! 좋은 답변 비록, 나는 그것을 "테이블"을 설정하고 그것을 수정하면 참조하십시오 –

0

호버링이 IE6에서 작동하지 않습니다 ... 이것이 문제 일 수 있습니다. http://www.robspangler.com/blog/hover-pseudo-class-bug-fix-for-ie6/

+0

... 메뉴 항목들이 적절한 클래스를 할당 받고 있는지 확인/스타일 (페이지 소스보기를 선택). 한 걸음 더 나아가 파이어 버그 (Firebug)를 사용하여 어떤 스타일이 적용되고 어떤 스타일이 덮어 쓰여지는지 확인할 수 있습니다. –

+0

흠, asp.net은 자바 스크립트로 컨트롤을 렌더링하고 사용자의 브라우저를 고려하기 때문에 오히려 이상하게 보입니다.하지만 다른 방법이 없다면 완료해야합니다. 더 자세히 살펴보면 Menu 컨트롤의 StaticSelectedStyle-CssClass 속성을 설정하더라도 html에 올바르게 설정되어 있지 않습니다. 대신, 그것은 단지 "selected"라고 불리는 클래스 일 뿐이며 #navMenu a.selected에 스타일을 적용하면 실제로 선택한 페이지의 스타일이 지정됩니다. 어떻게 일치하지. 여전히, 나는 자바 스크립트와 일관성없는 CSS보다 더 좋은 방법이 있다는 희망을 붙잡을 것이다. – Shaun

1

내가 당신처럼 정확히 같은 개발 환경을 사용하여 ...하지만 자바 스크립트로 고정 될 수있다, 나는 선택하면 유혹과 녹색에서 파란색이 될 기본적으로 빨간색 항목을 가지고 메뉴를 생성 할 수 있습니다. web.config 파일에 테마를 포함 시켰습니다. IE 8을 사용합니다. IE 버전에서 문제가 될 수 있습니까? Greetz

+0

분명히 Visual Studio 2010 구성에 문제가있었습니다. 이후 IIS7을 사용하는 xml 환경 설정을 사용하여 IE8에서 스타일을 올바르게 렌더링 할 수있었습니다. 나는 그것을 정리해야 할 것이다. 나는 당신이 그것을 조사해 주셔서 감사합니다. 그러나 메뉴 컨트롤을 렌더링 할 때 Asp.net의 명명 체계에서 작동하는 것을 함께 해킹하지 않고도 선택 및 마우스 오버 스타일에 대해 외부 CSS 클래스를 사용할 수는 없습니다. xml 형식으로 스타일을 지정 했습니까? 아니면 외부 스타일 시트를 사용할 수 있었습니까? – Shaun

+0

외부 스타일 시트를 사용했습니다. 그러나 물론, 나는 여전히 VS 2008을 사용하고이 방향에 아무런 문제가 없었다;) 재미있는 문제. – AGuyCalledGerald

1

ASP.NEt 4.0에서 실제 "선택한"특성을 태그의 클래스에 넣습니다.그래서 내가 한 일은 CSS로 목표를 세우고 리 대신에 내 태그, 패딩 등의 크기를 설정했는지 확인하고 꿈처럼 작동하는 것입니다.

2

같은 문제가있는 경우 web.config - controlRenderingCompatibilityVersion을 3.5에서 4.0으로 변경하여 문제가 해결되었습니다.

AjaxControlKit을 추가 한 후에 발생했다고 생각합니다.

이 작동 : 파이어 폭스/ID 오픈 페이지와 또한

<pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID"> 
    <controls> 
     <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" /> 
    </controls> 
</pages>  
관련 문제