締切済み

fire foxでリスト番号が表示されてしまう

  • すぐに回答を!
  • 質問No.4171024
  • 閲覧数92
  • ありがとう数8
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 23% (3/13)

プルダウンメニューを使っていてリストマークを表示しない設定にしていますが、firefox(ver3.0)で確認するとリスト番号(1のみ)が表示されます。原因が分かる方いらっしゃいましたら解決方法を教えてください。(下記は5つメニューがある中の3つ分のHTMLとCSSです。)
<==HTML==>
<div id="menu">
<ul class="main">
<li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">トップ</a> </li>
</ul>
<ul class="main2">
<li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">メニューのご紹介</a>
<ol class="sub">
<li><a href="#">トップ</a></li>
</ol>
<ol class="sub2">
<li><a href="#">メニューのご紹介</a></li>
</ol>
</li>
</ul>
<ul class="main3">
<li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">店舗のご案内</a>
<ol class="sub3">
<li><a href="#">店舗のご案内</a></li>
</ol>
<ol class="sub4">
<li><a href="#">当店の歴史</a></li>
</ol>
<ol class="sub5">
<li><a href="#">ご予約</a></li>
</ol>
</li>
</ul>
</div>

<==CSS==>
/****全体位置の決定****/
#menu{
width:630px;
height: 89px;
float: left;
z-index: 1000;
margin-top: 20px;
margin-left: 0px;
padding-left: 0px;
list-style-type: none;
left: 4px;
top: -12px;
font-size: 0.8em;
position:relative;
}

/****メインメニュー用スタイル****/

ul.main{
margin:0px;
padding:0px;
list-style:none;
text-align:center;
width: 126px;
float: left;
height: 40px;
}

ul.main2{
margin:0px;
padding:0px;
list-style:none;
text-align:center;
width: 126px;
float: left;
height: 40px;
}

ul.main3{
margin:0px;
padding:0px;
list-style:none;
text-align:center;
width: 126px;
float: left;
height: 40px;
}

/*通常時*/
.main li.off{
position:relative;/*×*/
float:left;/*×*/
height:40px;/*○*/
width:126px;/*○*/
overflow:hidden;/*○*/
}

.main2 li.off{
position:relative;/*×*/
float:left;/*×*/
height:40px;/*○*/
width:126px;/*○*/
overflow:hidden;/*○*/
}

.main3 li.off{
position:relative;/*×*/
float:left;/*×*/
height:40px;/*○*/
width:126px;/*○*/
overflow:hidden;/*○*/
}

/*展開時*/

.main li.on{
float:left;/*×*/
overflow:hidden;/*×*/
width:126px;/*○*/
list-style:none;
}

.main>li.on{
overflow:visible;/*×*/
}

.main2 li.on{
float:left;/*×*/
overflow:hidden;/*×*/
width:126px;/*○*/
list-style:none;
}

.main2>li.on{
overflow:visible;/*×*/
list-style-type:none;
}

.main3 li.on{
float:left;/*×*/
overflow:hidden;/*×*/
width:126px;/*○*/
list-style:none;
}

.main3>li.on{
overflow:visible;/*×*/
}

/*リンクスタイル*/
.main a{
display:block;
text-decoration:none;
background-image: url(images/m_top.jpg);
background-repeat: no-repeat;
height: 40px;
width: 126px;
text-indent:-2000px;
}

.main a:hover{
background-image: url(images/m_top-on.jpg);
}

.main2 a{
display:block;
text-decoration:none;
background-image: url(images/m_menu_list.jpg);
background-repeat: no-repeat;
height: 40px;
width: 126px;
text-indent:-2000px;
}

.main2 a:hover{
background-image: url(images/m_menu_list-on.jpg);
}

.main3 a{
display:block;
text-decoration:none;
background-image: url(images/m_store.jpg);
background-repeat: no-repeat;
height: 40px;
width: 126px;
text-indent:-2000px;
}

.main3 a:hover{
background-image: url(images/m_store-on.jpg);
}

/****サブメニュー用スタイル****/
ol.sub{
text-align:left;
margin: 0px;
padding: 0px;
height: 40px;
width: 126px;
}

回答 (全1件)

  • 回答No.1

ベストアンサー率 69% (388/560)

> firefox(ver3.0)で確認するとリスト番号(1のみ)が表示されます。

今手元にFirefoxがない環境なので検証できませんが、ソースをぱっと見たところ<ol>のlist-styleが"none"に初期化されていなければ、「オーダー・リスト」なので番号が表示されるのは当然の結果ではないかと。
ol {
list-style: none;
}
を追加すればリスト番号は表示されなくなります。他環境で表示されていないのは、親要素のいずれかから"list-style-type: none;"を継承しているためかmargin/paddingの値が0になっているためか?と(詳細を未検証の為、断定はしません)。ちなみに今見ているのはSafariですが、Safari上でもやはりFirefoxで見えているのと同様、<ol>部分のリスト番号が全て表示されております。

ただ、ここで素朴な疑問なのですが、何故サブメニュー部分が<ul>ではなく<ol>なのでしょうか?メインメニューに対するサブメニューを番号付きリストにしたい、というのは内容によってはわからないわけではありませんし、間違いでもありません。ただ、提供されたソースを見る限りではその必然性がわかりかねるので…例えば、<ul class="main3">に対するサブメニューは3アイテムある様ですが、であれば、
<ol class="sub3">
<li><a href="#">店舗のご案内</a></li>
<li><a href="#">当店の歴史</a></li>
<li><a href="#">ご予約</a></li>
</ol>
となるのが適切の様に思われるのですが、何故か更に1アイテムづつ別々の<ol>でマークアップされていますよね(だから常に"1"が表示されます)。何か理由がありますか?リンク部分を実際には背景画像(おそらくナビボタンでしょう)で表示させるので個別の画像を指定しなければならないから、という事が理由なら、<li>に直接idを振ってCSSでの定義を分ければ済む事ですし…
感謝経済
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


感謝指数によるOK-チップ配布スタート!

ピックアップ

ページ先頭へ