人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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にマイナスの値を入れるしかないのでしょうか?

教えてください。

●質問者: あらた
●カテゴリ:インターネット ウェブ制作
✍キーワード:background border CSS firefox GIF
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● ヨネちゃん
●60ポイント ベストアンサー

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

list-style:none;

#side_menu li {}

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

◎質問者からの返答

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

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

list-style-position:inside;

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ