CSSコミュのリストのbackgroundが反映されません

連続のトピ立て申し訳ありません。

リストのスタイルシートなのですが

#resent {margin:0px 0px 0px 10px;
padding:0px;
list-style-type:none;
}
#resent li { background:url("./img_top/dot01.gif") no-repeat center left;
padding:0px 0px 0px 17px;
font-size:13px;
line-height:16px;
text-align:left;
}

とスタイルシートを書き、HTML上では

<ul id="resent">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</li>
</ul>

と書いているのですが
resent liのbackgroundの部分だけ、なぜか反映されません。
list-style-imageに変えてもだめ、画像ファイルを対象ページと同じ階層に置いても、だめでした。

ヒントになりそうなページは見尽くしたのですが、どうしても反映されません。どこが悪いのでしょうか。
ちなみに、他の要素は全て反映されています。CSSバリデーションでも異常は見つかりませんでした。

申し訳ありませんが、力を貸してください。

コメント(15)

最初
全て
最新の40件

[3] mixiユーザー 10月30日 23:46

回答ありがとうございます。
kaiserさんcssファイルからの相対パスという一文を読んで、修正してみたのですが、まったく表示されませんでした。
スタイルシートを入れているフォルダに、背景画像を入れたのですが、それでも表示されませんでした。

どこが悪いのでしょう…。

[4] mixiユーザー 10月30日 23:51

background:url("　") のダブルクォーテーションの中の部分を絶対パスで書いたらどうなりますか？

[6] mixiユーザー 10月30日 23:57

arigayas さん、sora さん、回答ありがとうございます。
絶対パスにしても、結果は変わりませんでした。
"../img_top/dot01.gif"にしても、結果は同じで表示されませんでした。

如何ともしがたいです。

[7] mixiユーザー 10月31日 00:18

画像のフォルダの位置は間違っていませんよね？
そのフォルダに画像は入っていますよね？

ティーエさんをバカにしているわけではありません。
つい先日同じポカを自分がしたばかりなので。
CSSは画像がちゃんとあれば問題ないと思います。
＃自分で試した限りでは、表示されましたよ。

それでもダメならarigayasさんが書いているように、
絶対パスに書き換えて、試してみてください。

[9] mixiユーザー 10月31日 00:38

やっちゃんさん、回答ありがとうございます。
画像フォルダの位置は間違えていませんし、フォルダにも画像は入っています。
スタイルシートファイルが入っているフォルダに、画像ファイルを入れて指定したのですが、それでも表示されませんでした。
絶対パスで表示させることも考えたのですが、今の状態はサンプルで、いずれは別サーバーに移すことになるので、改めて書き直すことになるので、なるべく相対パスで書こうと思っています。
soraさん、回答ありがとうございます。
やっぱり、画像のパス・ファイル名が問題になってしまいますか…。
ますますわからなくなってきました（涙）。

[10] mixiユーザー 10月31日 00:42

どういった相関関係で、以下の不具合が出るのかは確認していないのですが、WinIEだと、border属性を設定していないとblockとして保持されないことがあります。
試しに li に
display: block;
border: solid white 1px;
を入れてみてください。
うまく行ったらここから削っていって正解にたどり着けると思います。

[11] mixiユーザー 10月31日 01:11

・当該画像は直接ブラウザで表示できますか？
・背景以外のプロパティ、paddingやfont-sizeは適用されていますか？
・id、classを間違っていませんか？
・指定したid名の綴りはCSS側と大文字小文字含め合っていますか？

[13] mixiユーザー 10月31日 01:52

試してみましたが出ますね。

""と最後の</li>は不要な気がしました。

既出省いて自分の中で考えられるのは、同じid名が有るとか、
別のliのスタイルが重複してるとかですかね。
試しに#resentの行を一番下に記述してみるとか。。かなぁ…

後は、主流ブラウザ全てで表示されないのか。
でしょうか・・・

[14] mixiユーザー 10月31日 03:27

OS:WinXP SP2
ブラウザ:IE6、NN7、Firefox
で確認しましたがちゃんと表示されますね。

関係ないかもしれませんが普段使ってるCSSの本に
「Mac版IEではURLを一重引用符（'）で加工とは行け画像が表示されなくなります。
N4.xでは別ファイルのCSSで指定した相対URLは、HTMLファイルからの相対URLとして解釈されます。」
という注意書きがありました。

あと、Winでは画像を拡張子で判断するので画像形式と拡張子が合っているか確認してみるといいかも知れません。

[15] mixiユーザー 10月31日 13:20

ニョクマムさん、マッツさん、ハヤスィさん、ryoさん、eno＠さん、回答ありがとうございました。

display:block;

を入れると出ました！
長い間悩み続けていたことが、解消されました。ありがとうございました！

ログインすると、みんなのコメントがもっと見れるよ