奇妙なCSSの挙動（ロールオーバー/ WスプライトNAV）

Question

ここでナビゲーション画像は質問にあります：

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

私が何をしたいのか、かなり基本的なものと私は、私は、過去にそれを何度もやりましたなぜそれが今働いていないのか分かりません。基本的に上記の画像を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> 

奇妙な！最初のタブ、ホームは完璧に機能します。残りの4つのタブは、！importantを指定しない限り、最初の背景位置プロパティに従わないが、ロールオーバーは正常に機能する。ここではこれら二つの状況の画像は、それぞれ次のとおりです。

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

http://img.skitch.com/20090807-rmn9b2tu54q4agyta2idfra5x5.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ルールが発射されているかを教えてくれます。それは問題がどこにあるのかを理解するのに役立ちます。

（すでにFirebugを知っているなら、私を許しますが、Web開発者の驚くべき数はしないでください。）