liタグのナビボタンがFirefoxで二重に表示。

解決済

質問者：kanaflan
質問日時：2011/09/30 00:40
回答数：3件

liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？
<div id="sidebar">
<ul>
<li id="aaa"><a href=""><span>aaa</span></li>
<li id="bbb"><a href=""><span>bbb</span></li>
<li id="ccc"><a href=""><span>ccc</span></li>
</ul>
</div>

div#sidebar {
width: 245px;
float:left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
div#sidebar ul li a {
display: block;
}
div#sidebar ul li a span {
position:absolute;
width: 0;
height: 0;
overflow:hidden;
}
ul li#aaa a {
width: 245px;
height: 60px;
background-image:url(image/aa.jpg);
background-position: 10px 20px;
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}
ul li#bbb a {
width: 245px;
height: 60px;
background-image:url(image/bb.jpg);
background-position: 10px 20px;
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}
ul li#ccc a {
width: 245px;
height: 60px;
background-image:url(image/cc.jpg);
background-position: 10px 20px;
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2011/09/30 09:30

CSSを見ただけでは何をしたいかわからないので、適当な画像でテストしましたがますますわからなくなった。

（添付画像）
　CSS(カスケーディングスタイルシート)なので、カスケーディングを使わないと数行で済むスタイルシートが何十行にもなって、何をしたいかも解らなくなります。

<body>
　<div class="header">
　　<h1>見出し</h1>
　　<div class="nav">
　　　<ul>
　　　　<li><a href="AA">aa</a></li>
　　　　<li><a href="BB">bb</a></li>
　　　　<li><a href="CC">cc</a></li>
　　　</ul>
　　</div>
　</div>
　だとして、
div.header div.nav{float:left;width:245px;}
div.header div.nav ul,div.header div.nav ul li{
　display:block;list-style:none;
　margin:0;padding:0;
}
div.header div.nav li{
　height:60px;
　border:solid #999999 1px;
　border-width: 0 1px 0 0;
}
div.header div.nav li a{
　width:100%;height:100%;
　background:url(aa.jpg) no-repeat 10px 20px;}
}
div.header div.nav li a[href="BB"]{
　background-imag:url(bb.jpg);
}
div.header div.nav li a[href="CC"]{
　background-imag:url(cc.jpg);
}
div.header div.nav span{visibility:hidden;}
　位でよいはず。見やすいため全角スペースで字下げしてあります。