みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

【CSS】firefoxで背景が表示されない-ナビゲーション(画像置換リンク)

「li」に背景画像を指定して、ナビゲーションをつくってみたところ・・・
Firefox、Operaで表示されません。
(IEでは表示されます。)
ヘッダー左にロゴ(これはどのブラウザでも表示される)、右側にナビゲーションを配置した作りです。

ハックなど色々調べてみたのですが、解決できず・・・。
力をお貸しいただけないでしょうか。

g_nav.gif・・・グローバルナビゲーション一枚画像550px×30px。(上部:ロールオーバー前、下部:ロールオーバー時)

【HTML】
<!--headerここから-->
<div id="header">

<!--logoここから-->
<div id="logo">
<h1><a href="aaa.html">logo</a></h1>
</div>
<!--logoここまで-->

<!--naviここから-->
<div id="nav">
<ul>
<li id="nav01"><a href="aaa.html">あああ</a></li>
<li id="nav02"><a href="aaa.html">あああ</a></li>
<li id="nav03"><a href="aaa.html">あああ</a></li>
<li id="nav04"><a href="aaa.html">あああ</a></li>
<li id="nav05"><a href="aaa.html">あああ</a></li>
</ul>
</div>
<!--naviここまで-->

</div>
<!--headerここまで-->

【CSS】
#header{
width:800px;
height:70px;
margin:0 auto;
padding:0;
}

#logo {
width:216px;
height:70px;
background-image:url(../cmn_img/logo.gif);
float:left;
}

#nav{
width:550px;
height:30px;
float:right;
margin:40px 0 0 0;
padding:0;
text-indent:-999em;


}

#nav ul{
margin:0;
padding:0;
list-style-type:none;
}

#nav li{
display:inline;
}

#nav li#nav01 a,#nav li#nav02 a,#nav li#nav03 a,#nav li#nav04 a,#nav li#nav05 a,{
display:block;
background-image:url(../cmn_img/g_nav.gif);
overflow:hidden;
float:left;
}

#nav li#nav01 a{width:110px; height:30px; background-position:0 0;}
#nav li#nav02 a{width:110px; height:30px;background-position:-110px 0;}
#nav li#nav03 a{width:110px; height:30px;background-position:-220px 0;}
#nav li#nav04 a{width:110px; height:30px;background-position:-330px 0;}
#nav li#nav05 a{width:110px; height:30px;background-position:-440px 0;}


#nav li#nav01 a:hover{width:110px; height:30px;background-position:0 -30px;}
#nav li#nav02 a:hover{width:110px; height:30px;background-position:-110px -30px;}
#nav li#nav03 a:hover{width:110px; height:30px;background-position:-220px -30px;}
#nav li#nav04 a:hover{width:110px; height:30px;background-position:-330px -30px;}
#nav li#nav05 a:hover{width:110px; height:30px;background-position:-440px -30px;}

【下記ハック使用】
#header:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#header {display: inline-table;}

/* Hides from IE-mac \*/
* html #header {height: 1%;}
#header {display: block;}
/* End hide from IE-mac */

投稿日時 - 2008-04-30 01:25:42

QNo.3986473

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

多分、
#nav li#nav01 a,#nav li#nav02 a,#nav li#nav03 a,#nav li#nav04 a,#nav li#nav05 a,{

「li#nav05 a,」の一番最後についてる「,」が問題なんだと思うのですが。
取ってみたらいけたりしませんか?

投稿日時 - 2008-04-30 02:34:18

あなたにオススメの質問