リストに画像をつけると・・・大きいと駄目でしょうか？

質問

リストに画像を指定して表示させるようにしているのですが、リストに使う画像って大きいと駄目ですか？

というのが、Internet　Explorerでは普通に表示されているのですが、Firefoxだと枠の外にリスト画像が飛び出てしまいます。

ソースは以下のようになります。

.list1 {
list-style-image: url(images/menu.gif);
padding: 5px;
font-size: 13px;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #FFCC00;
}

何か決まりがあるのでしょうか？

よろしくお願いいたします。

回答No.5

koutarou504

＞枠の外にリスト画像が飛び出てしまいます。
枠の方に何か指定していませんか？
横幅や高さなどを指定している場合で IE の場合は中身の方が大きい場合は外側の指定を無視しますが、
Firefox などは指定通り表示しますので
中身の方が大きければ中身ははみ出ます。

実際、なんの指定もなく ol 要素を div 要素で含んでも、
どのブラウザでも問題なく中身が div 要素の範囲を飛び出る事はありませんでした。
（検証方法：div 要素は背景色を指定する事により範囲を確認し、対象ブラウザは IE6.0 Sleipnir2.0 Firefox1.0.6 Mozilla1.7.5 Opera8.01 で行いました。）

後は、状況が再現する記述を提示して調べる以外、
詳細は判らないと思いますので、
再現する記述を改めて提示されるのが良いかと思います。

回答No.4

ao_

>Firefoxだと枠の外に…
枠って何の枠ですか？

どうやら私は質問の意味すら理解していないようです。
#3さんの解決策が一番だと思います。

お礼

説明不足ですみません。

>枠って何の枠ですか？
2カラムで形成していて左側はメニューに使っています。で今回メニュー部分をリストを使っているのですが、画像が大きいためか左側のカラムのBOXから飛び出してしまうのです。(枠の外)

色々やってみるのですがうまくいきません、何かいい方法は無いものでしょうか？

回答No.3

partita

.list1 {
list-style-type:none;
background-image:url(images/menu.gif);
background-position:left center;
padding:25px;
font-size:13px;
border-bottom:2px solid #FFCC00;
}

これでやってみるとどうなりますか？
list-style-imageは微調整ができないので
不便ですよ。背景画像にすると、
background-positionでピクセル単位で
位置の調整が可能です。
25pxと「left center」のところは適当に変えてください。

お礼

有難うございます。

説明不足で伝わらないところが多かったと思います。すみませんでした。

今回はあくまでlistを使って行おうと考えております。CSSを書いていただき申し訳ないのですが、今回はlistの定義の限界に挑戦したいと思います。笑）

回答No.2

steel_gray

スタイルに以下を追加してみてください。
list-style-position:inside;

なお、これを追加してもIEとFirefoxで見た目が変わるかもしれませんが、ulやliのmarginやpaddingで調整してください。→参考URL

参考URL：

http://www.mozilla.gr.jp/standards/webtips/webtips0034.html

お礼

有難うございます。

list-style-position:inside;ですが、今回はinsideの指定を行いたくありません。

何かよい方法が無いものでしょうか？

回答No.1

ao_

補足お願いします。
.list1は何のタグのclass名でしょうか？できればhtmlも付けてください。
また画像のサイズを教えてください。

お礼

ao_さん有難うございます。

説明不足で申し訳ありませんでした。以下補足になります。まず画像は40×40pxです。次にHTML部分を書きます。

<ul>
<liclass="list1"><ahref="index.html">TOP</a></li>
</ul>

といった感じでリストでメニュー部分を書いています。以上、よろしくお願いします。