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

ホームページのサイドメニューにリストを下記スタイルシートの通り作りましたが、Internet Explore で問題なく表示されますが、Firefox では リスト<li>の先頭部分が3文字分ほど空きます。
プロパティpadding-left の値を指定してもリストの一覧が左に寄りません。ご指導下さい。


/*___________ レイアウト【LEFT】 ___________ */
#side {
float: left;
width: 180px;
background-repeat: repeat;
padding: 20px 0 25px 0;
background-image: url(img/base_bg.jpg);
}

#side li {
list-style-type: none;
}

#side_d {
padding-top: 2px;
margin: 0 0px 0 0;
width: 180px;
}


#side_d ul {
margin-bottom: 5px;
margin: 0 9px 0 9px;
width:160px;
}

●質問者: yoshi663
●カテゴリ:インターネット ウェブ制作
✍キーワード:.jpg background-image background-repeat firefox Internet
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● captim
●35ポイント

こんな感じに変更したらいいと

思いますよ。

#side li {

padding: 0px 3px 0px 0px;

margin: 0px 3px 5px 0px;

list-style-type: none;

}

使い方の参考URL

http://www.htmq.com/style/padding.shtml

http://www.htmq.com/style/margin.shtml

◎質問者からの返答

ご指示頂きましたとおりにやってみましたがリスト一覧が右に寄ったままです。


2 ● rouge_2008
●35ポイント ベストアンサー

IEのバージョンは6でしょうか?それとも7でしょうか?

「id="side"」を指定したボックスの中に問題のリストがあるのですよね?

次のようにsideボックスの中のulにパディングとマージンで0pxを指定してみてはいかがでしょうか?

#side ul {

padding-left: 0px;

margin-left: 0px;

}

リストの項目がボックスの左端にくっつきすぎているなと思う場合は、#side liに好みのパディングを指定して調節すると良いです。

#side li {

list-style-type: none;

padding-left: 10px;

}


「id="side_d"」を指定したボックスもsideボックスの中でしょうか?

上記で解決しない場合は、ボックスの位置関係などがもっと良く分かるように、HTMLの方も見せてもらえると回答し易いのですが…。

◎質問者からの返答

ありがとうございました。この件で何日も費やしましたがお陰様で解決できました。

関連質問


●質問をもっと探す●



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