HTMLのコード::::::::::::::

<ul id="side_menu">
<li><a href="#">メニューA</a></li>
<li><a href="#">メニューB</a></li>
<li><a href="#">メニューC</a></li>
</ul>
::::::::::::::::::::

CSSのコード::::::::::::::
#side_menu {
list-style:none;
padding:0;
margin:0;
}
#side_menu li {
padding:0 0 0 25px;
margin:0;
background: #F6F8E7 url(icon.gif) no-repeat 7px 5px;
border-left:1px solid #DDE6A5;
border-right:1px solid #DDE6A5;
border-bottom:1px solid #DDE6A5;
}
:::::::::::::::::::::

という感じで、サイドメニューにリスト要素を使い、リストの丸を消したあと、背景に矢印のようなアイコンを入れ、メニューAなどはpaddingでずらして表示しています。

FireFoxやOperaなどでは、paddingが意図したように表示されるのですが、どうやらIEはpaddingを一旦0pxで指定しても、余白ができてしまうみたいで、他のブラウザよりメニューAが右に寄ってしまいます。

IEでも、FireFoxなどと一緒の余白にしたいのですが、どうすればいいのでしょうか?アンダースコアハックみたいな形で、IEのみpaddingにマイナスの値を入れるしかないのでしょうか?

教えてください。

回答の条件
  • 1人2回まで
  • 登録:2006/06/21 21:42:34
  • 終了:2006/06/22 09:53:12

ベストアンサー

id:yoneto164 No.1

ヨネちゃん回答回数813ベストアンサー獲得回数942006/06/22 01:06:15

ポイント60pt

WinIE6で試してみましたが正常に表示されましたので原因がはっきりしないのですが、

list-style:none;

#side_menu li {}

に記述するのが普通だと思いますので、試してみてはいかがでしょうか。

id:aratako0

確かに、上記ソースのみで表示してみると、きれいに表示されました。

その上で、いろいろと試行錯誤してみますと、どうやら他のCSSファイルで、ulに対して、

list-style-position:inside;

を指定しており、この指定を消すときれいに表示されました。

ちなみに、list-style:none;はulでもliでもどちらでも今のところはきれいに表示されるみたいです。

ありがとうございます、お騒がせしました。

2006/06/22 09:52:56
  • id:villain
    ぱっと見で用途や結果が分かりませんが(実際に試すのも面倒なので
    試してもいませんが)、もしリストのマーカーを他の画像に変更
    したいということでしたらlist-style-imageプロパティを使用
    すればいいのではないでしょうか。

    http://www.htmq.com/style/list-style-image.shtml

    また、<dl><dt>~</dt></dl>でマーカーのないリストを作成
    できます。
    (これは<ul>や<ol>と<li>の組み合わせとは微妙に仕様がことなり
    ますが...)

    http://www.htmq.com/html/dl.shtml
    http://www.htmq.com/html/dt.shtml
  • id:yoneto164
    list-style-image を使わない理由として考えられるのは、背景画像指定のほうが表示位置を細かく指定できるからだと思いますよ。<dl>タグは定義リストですので、<dt>のあとに<dd>が必要になります。
  • id:smoking186
    yoneto164さんへ.
    >list-style-image を使わない理由として考えられるのは、背景画像指定のほうが表示位置を細かく指定できるからだと思いますよ。<dl>タグは定義リストですので、<dt>のあとに<dd>が必要になります。

    HTML 4.01 Strictだと,
    <!ELEMENT DL - - (DT|DD)+ -- definition list -->
    なんで, DL中にはDTかDDが最低一個あれば良いです.

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません