이상한 CSS 동작 (롤오버/w 스프라이트 탐색은)

Question

여기에 문제의 탐색 이미지와 왜 지금 작동하지 않는지 이해할 수 없습니다. 기본적으로 위 이미지를 nav 배경으로 사용하고 그에 따라 너비와 배경 위치를 조정하십시오. 여기 내 CSS입니다 :

#navigation { width: 960px; height: 28px; clear: both; background: url('../images/nav-bg.png') repeat-x; } 

     #navigation ul { margin: 0 0 0 20px; padding: 0; } 
      #navigation ul li { float: left; list-style: none; } 
      #navigation ul li a { display: block; height: 28px; background: url('../images/nav-tabs.png') no-repeat; text-indent: -9999px;} 

       #nav-home { width: 62px; } 
        #nav-home.active, #nav-home:hover { background-position: 0 -28px; } 

       #nav-cp { width: 130px; background-position: -62px 0; } 
        #nav-cp.active, #nav-cp:hover { background-position: -62px -28px; } 

       #nav-web { width: 106px; background-position: -192px 0; } 
        #nav-web.active, #nav-web:hover { background-position: -192px -28px; } 

       #nav-clix { width: 106px; background-position: -298px 0; } 
        #nav-clix.active, #nav-clix:hover { background-position: -298px -28px; } 

       #nav-dna { width: 90px; background-position: -405px 0; } 
        #nav-dna.active, #nav-dna:hover { background-position: -405px -28px; } 

그리고 여기에 페이지 코드는 미래의 교정에 지정된 일반 HTML5의 DOCTYPE, < DOCTYPE html로 >로이다 : 나는 '

<div id="navigation"> 

    <ul id="nav-tabs"> 
     <li><a href="#" id="nav-home">Home</a></li> 
     <li><a href="#" id="nav-cp">Client Portal</a></li> 
     <li><a href="#" id="nav-web">Weboptima</a></li> 
     <li><a href="#" id="nav-clix">Clixfactor</a></li> 
     <li><a href="#" id="nav-dna">Lead DNA</a></li> 
    </ul> 

</div> 

이상한 것들! 첫 번째 탭 인 Home은 완벽하게 작동합니다. 나머지 4 개의 탭은! important를 지정하지 않으면 초기 background-position 속성을 따르지 않지만 롤오버는 정상적으로 작동합니다. 여기에 각각이 두 가지 상황의 이미지입니다 :

http://img.skitch.com/20090807-rmn9b2tu54q4agyta2idfra5x5.png

http://img.skitch.com/20090807-fybag852bbbi6ut751w167y1hp.png

그냥이 (희망) 간단한 문제에 약간의 통찰력을 찾고. 미리 감사드립니다!

Answer 1

당신은 배경 이미지 탭의 스타일을보다 더 구체적이다 지정한 스타일을, 그래서 선행을 취합니다.

대신도 0% 0% 기본적으로 background-position을 설정하는 복합 스타일 background를 사용하는, 별도의 구성 요소를 지정 : 당신은 특이 here에 대해 읽을 수 있습니다

background-image: url('../images/nav-tabs.png'); background-repeat: no-repeat; 

.

Answer 2

정확히 어떤 문제인지는 모르겠지만 CSS 규칙의 상대적인 우선 순위와 관련된 문제인 것 같습니다.

그런 종류의 문제에 대해서는 Firebug이 우수합니다. 특정 요소가 CSS 규칙을 실행하는 경우 정확하게 알려줍니다. 문제가있는 곳을 알 수 있도록 도와주세요.

(이미 방화범에 대해 알고 있다면 용서하지만, 웹 개발자의 놀라운 숫자는하지 않습니다.)