2010-08-12 4 views
2

게시물의 길이는 죄송합니다. 이것은 아주 이상한 문제이며 최대한 많은 정보를 제공하고자합니다.이상한 CSS 동작

가로 탐색 메뉴에 사용하고있는 다음 CSS 규칙이 있습니다. 메뉴는 ASP : repeater W 항목의 데이터베이스 테이블을 사용하여 작성됩니다.

#nav 
{ 
    margin: 0px; 
    padding:0px; 
    list-style-type: none; 
    height: 20px; 
    margin-right:auto; 
    margin-left:auto; 
    width:726px; 
} 

#nav > li 
{ 
    margin:0px; 
    padding:0px; 
    display:inline-block; 
    color: #FFFFFF; 
    height:17px; 
    border:0px; 
    width:90.75px; 
    text-align:center; 
    position:relative; 
    float:left; 
} 

#nav > li > ul 
{ 
    margin:0px; 
    padding:0px; 
    position: absolute; 
    left: -999em; 
    display:block; 
    overflow:visible; 
    z-index:100; 
    width:150px; 
    background-color:#eee; 
} 

#nav > li:hover > ul 
{ 
    left:0px; 
    z-index:100; 
    box-shadow: 0px 0px 5px #555; 
    -moz-box-shadow: 0px 0px 5px #555; 
    -webkit-box-shadow: 0px 0px 5px #555; 
    /* IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 

    /* IE 5-7 */ 
    filter: alpha(opacity=80); 

    /* Netscape */ 
    -moz-opacity: 0.8; 

    /* Safari 1.x */ 
    -khtml-opacity: 0.8; 

    /* Good browsers */ 
    opacity: 0.8; 

} 

#nav > li > ul > li 
{ 
    left:0px; 
    display:block; 
    color:#333; 
    width:150px; 
    text-align:left; 
    height:auto; 
} 


#nav a, #navbottom a 
{ 
    line-height:20px; 
    display:block; 
    height:20px; 
    border-bottom:2px solid #0c1b53; 
} 

#nav a:link, #navbottom a:link, #nav a:visited, #navbottom a:visited 
{ 
    border-bottom:2px solid #0c1b53; 
    color: #FFFFFF; 
    text-decoration: none; 
} 

#nav a:hover, #navbottom a:hover 
{ 
    border-bottom:2px solid #fff; 
} 

#nav a:active, #navbottom a:active 
{ 
    border-bottom:2px solid #fff; 
    color: #FEFFBD; 
    text-decoration: none; 
} 

#nav > li > ul > li a:link 
{ 
    margin:10px; 
    line-height:15px; 
    height:auto; 
    color:#444; 
    border-bottom: 1px solid #777; 
    /* IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 

    /* IE 5-7 */ 
    filter: alpha(opacity=100); 

    /* Netscape */ 
    -moz-opacity: 1.0; 

    /* Safari 1.x */ 
    -khtml-opacity: 1.0; 

    /* Good browsers */ 
    opacity: 1.0; 
} 

#nav > li > ul > li a:hover 
{ 
    color:#222; 
    border-bottom: 1px solid #555; 
} 

가 생산하는 HTML은 다음과 같습니다 :

<ul id="nav"> 
    <li> 
     <input type="hidden" name="ctl00$TopNavRepeat$ctl01$LinkIdField1" id="ctl00_TopNavRepeat_ctl01_LinkIdField1" value="1" /> 
     <a id="ctl00_TopNavRepeat_ctl01_HyperLink1" title="Home Page" href="../default.aspx">Home   </a> 
     <ul></ul> 
    </li> 
    <li> 
     <input type="hidden" name="ctl00$TopNavRepeat$ctl02$LinkIdField1" id="ctl00_TopNavRepeat_ctl02_LinkIdField1" value="10" /> 
     <a id="ctl00_TopNavRepeat_ctl02_HyperLink1" title="News from the IMA" href="../news/list.aspx">News   </a> 
     <ul></ul> 
    </li> 
    <li> 
     <input type="hidden" name="ctl00$TopNavRepeat$ctl03$LinkIdField1" id="ctl00_TopNavRepeat_ctl03_LinkIdField1" value="11" /> 
     <a id="ctl00_TopNavRepeat_ctl03_HyperLink1" title="About the IMA" href="../organisation/history.aspx">Organisation </a> 
     <ul> 
      <li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl01_HyperLink1" title="about the IMA" class="dropdown_Item" href="../organisation/history.aspx">About   </a> 
      </li> 
      <li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl02_HyperLink1" title="This is a description" class="dropdown_Item" href="list.aspx?type=all">Members  </a> 
      </li> 
      <li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl03_HyperLink1" class="dropdown_Item" href="../Boats/list.aspx#">Boats</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <input type="hidden" name="ctl00$TopNavRepeat$ctl06$LinkIdField1" id="ctl00_TopNavRepeat_ctl06_LinkIdField1" value="14" /> 
     <a id="ctl00_TopNavRepeat_ctl06_HyperLink1" href="../adverts">Ads   </a> 
     <ul> 
      <li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl01_HyperLink1" title="All For Sale Items" class="dropdown_Item" href="../adverts/list.aspx?type=sale">For Sale  </a> 
      </li> 
      <li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl02_HyperLink1" title="All Wanted Items" class="dropdown_Item" href="../adverts/list.aspx?type=wanted">Wanted   </a> 
      </li> 
      <li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl03_HyperLink1" title="Advertise with the IMA" class="dropdown_Item" href="../adverts/edit.aspx?action=New">Post an Ad  </a> 
      </li> 
     </ul> 
    </li> 
</ul> 

이 (일부 목록 항목이 곤란 생략 된) 생산하는 메뉴는 다음과 같습니다. 세 개의 하위 항목이있는 두 개의 항목 "Organization"과 "Ads"에도 불구하고 각 하위 항목이 동일 하긴하지만 조직의 두 번째 항목에는 nav> li> 대신 a> nav> li> a의 규칙이 표시됩니다.

As the menu displays http://dl.dropbox.com/u/4913815/Untitled.png

내가 그것을 통해가는 지금까지 내가 무슨 일이 일어나고 있는지 알 어차피로했습니다. 아무도 이것을 설명 할 수 있습니까?

+0

이것이 어떻게 문제를 일으키는 지 모르겠지만 회원은 부모 디렉토리 "../"에 대한 참조가없는 유일한 사용자입니다. 테스트로서 아마도 회원의 URL을 "../organisation/history.aspx"로 변경해보십시오. 원하는 방식이 아니더라도 그것이 이상한 특이 사항을 나타낼 수도 있습니다. – AaronLS

+0

이 코드와 CSS를 파이어 버그에 붙여 넣으면 올바르게 나온다. Members 항목은 다른 항목으로 적용된 CSS와 동일한 nav> li> ul> li를 가져옵니다. Firebug 플러그인을 사용하여 Firefox에서 사이트를로드하는 경우 멤버가 일부 스타일을 상속 받았다는 것을 확인할 수 있습니다. – AaronLS

+0

은 회원 링크가 자신을 #nav : active에서 상속 받고 활성으로 정의했기 때문에 #nav> li> ul> li a : link 규칙을 덮어 썼습니다. 도와 주셔서 감사합니다 –

답변

3

visited 또는 active 규칙이 정의되어 있지 않습니다. #nav> li> ul> li a : 없습니다. 회원 링크는 #nav a :의 정보를 대신 사용하므로 잘못 표시됩니다.

변경 #nav> li> ul> li a : 링크 #nav> li> ul> li a : 링크, #nav> li> ul> li a : 방문한 사람, #nav> li> ul> li a :이 문제를 적극적으로 해결합니다