- ベストアンサー
<li>メニューの背景画像、IEだけ出ない
どうぞよろしくお願いします。 あれこれやったのですが、なぜかwin IE7でだけ（IE6は未確認） メニューの背景画像（グラデーションを使ったもの）が表示できません。 モダンブラウザとmacでは確認しました。 今日一日悩んでるのですが、どうしても分かりません。 【HTML】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="../css/01.css" rel="stylesheet" type="text/css"> </head> <body><div class="right">【ダミーテキスト】</div> <div id="menuarea"> <!--メニューエリア--> <ul id="menu"> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">あいうえお</a></li> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">かきくけこ</a></li> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">たちつてと</a></li> </ul> <ul id="bnr"> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> </ul> </div> <!--/メニューエリアここまで--> </body> </html> 【CSS】 .right { width:300px; float:right; border:1px solid red; } #menuarea { font-size:80%; width:168px; height:100%; } ul#menu { width:168px; margin-left:0px; padding-left:1em; padding-top:1em; padding-bottom:100px;/*メニュー下の余白*/ background:url(../common/menu-up.jpg)no-repeat;/*メニュー画像上部*/ } ul#bnr { width:168px; background:url(../common/menu-btm.jpg)no-repeat;/*メニュー画像下部*/ margin-left:0px; padding-left:0.7em; padding-bottom:10px; background-position:0 100%; }
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
もしサンプルのソースがオリジナルからそのままコピペしたものであれば、下記が原因の様です。 【CSS】 ul#menu { （省略） background:url(../common/menu-up.jpg)no-repeat;/*メニュー画像上部*/ } ul#bnr { （省略） background:url(../common/menu-btm.jpg)no-repeat;/*メニュー画像下部*/ （省略） } ↑ それぞれ、"url()"と"no-repeat"の各プロパティの値の間に、半角スペースが入っていません。半角スペースを入れてから再表示させたらIE6/7共にちゃんと背景画像が表示されましたよ。一括指定をする場合は、各プロパティの値は半角スペースで区切らねばなりません。記述の仕方が正しくなかったので反映されなかったのでしょう。 あと、後者のul#bnrの方ですが、何故かbackground-positionだけは別途書いてますが、せっかく上部でbackgroundで一括しているのですからこれもまとめた方がすっきりしますよ。 ul#bnr { （省略） background: url(../common/menu-btm.jpg) 0 100% no-repeat; （省略） } ここを修正すればトラブルは解消しますが、HTMLのソースにもおかしな記述がいくつも見受けられますので今の内に修正しておいた方が宜しいでしょう。 ・DTD宣言がHTML4.01 Transitionalにも関わらず、から要素imgタグの記述がXHTMLの様に<img～ />と閉じています。 HTML4.01 Transitional では空要素タグをこの様に記述する事はできません。 ・<img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" />の箇所、何故かclassの前にスラッシュが入っています。この箇所にこの様な文字列は入れられません。
その他の回答 (1)
失礼ながらソースをコピーさせていただいて検証してみましたが、 Firefox3でもIE7でも同じようなページ（画像は枠だけですが）に なりましたよ。IEの設定で画像をブロックしていたりしませんか？
お礼
さっそくありがとうございます。 私も画像がブロックされているのかと思ってインターネットオプションを確認しましたが、画像は表示、にチェックが入っていました。 一時キャッシュをクリアしてみたりもしたのですが…。 ちなみにメニュー画像上部→メニュー背景画像上部の間違いです。
お礼
うわー！お恥ずかしい… ありがとうございます、バッチリ治りました…orz >DTD宣言 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> そうでした…↑に直しておきます！ また、class前のスラッシュも全然気づいてませんでした。 もっとちゃんと見なきゃ…反省。 今日一日ウンウン考えていたので、本当に助かりました。 心からお礼申し上げます！！