ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
質問者：brandin IEでリストに指定した背景画像が表示されない。
困り度：
  • 困っています
 以下のソースで三段階で設定しましたが、FIREFOXで表示できました。
IEだけ表示できなかったです。バグだと思いますが、いろいろ試して見ましたが、うまくできませんでした。
教えてください。


HTML
<ul id="globalnavi_list">
<li id="gn_top"><a href="＃" class="on">トップ</a></li>
<li id="gn_corporate"><a href="＃">研究所</a></li>
<li id="gn_service"><a href="＃">究所作品</a></li>
<li id="gn_works"><a href="＃">現場</a></li>
<li id="gn_ecology"><a href="＃">BBS</a></li>
<li id="gn_contact"><a href="＃">特設コーナー</a></li>
<li id="gn_last"><a href="＃">店舗</a></li>
</ul>


<CSS>
ul#globalnavi_list {
width:950px;
height:73px;
clear:both;
text-indent:-9999px;
text-decoration: none;
}
ul#globalnavi_list li{
float:left;
}
ul#globalnavi_list li a {
display:block;
height:73px;
text-decoration:none;
font-size:1px;
}
ul#globalnavi_list li#gn_top a {
background:#ffffff url("../../common/globalnavi.gif") 0 0 no-repeat;
width:97px;
}
ul#globalnavi_list li#gn_top a:hover {
background:#232323 url("../../common/globalnavi.gif") 0 -73px no-repeat;
}
ul#globalnavi_list li#gn_top a.on {
background:#232323 url("../../common/globalnavi.gif") 0 -146px no-repeat;
}
ul#globalnavi_list li#gn_corporate a {
background:#232323 url("../../common/globalnavi.gif") -97px 0 no-repeat;
width:145px;
}
ul#globalnavi_list li#gn_corporate a:hover {
background:#232323 url("../../common/globalnavi.gif") -97px -73px no-repeat;
}
ul#globalnavi_list li#gn_corporate a.on {
background:#232323 url("../../common/globalnavi.gif") -97px -146px no-repeat;
}
ul#globalnavi_list li#gn_service a {
background:#232323 url("../../common/globalnavi.gif") -242px 0 no-repeat;
width:146px;
}
ul#globalnavi_list li#gn_service a:hover {
background:#232323 url("../../common/globalnavi.gif") -242px -73px no-repeat;
}
ul#globalnavi_list li#gn_service a.on {
background:#232323 url("../../common/globalnavi.gif") -242px -146px no-repeat;
}
ul#globalnavi_list li#gn_works a {
background:#232323 url("../../common/globalnavi.gif") -388px 0 no-repeat;
width:125px;
}
ul#globalnavi_list li#gn_works a:hover {
background:#232323 url("../../common/globalnavi.gif") -388px -73px no-repeat;
}
ul#globalnavi_list li#gn_works a.on {
background:#232323 url("../../common/globalnavi.gif") -388px -146px no-repeat;
}
ul#globalnavi_list li#gn_ecology a {
background:#232323 url("../../common/globalnavi.gif") -513px 0 no-repeat;
width:74px;
}
ul#globalnavi_list li#gn_ecology a:hover {
background:#232323 url("../../common/globalnavi.gif") -513px -73px no-repeat;
}
ul#globalnavi_list li#gn_ecology a.on {
background:#232323 url("../../common/globalnavi.gif") -513px -146px no-repeat;
}
ul#globalnavi_list li#gn_contact a {
background:#232323 url("../../common/globalnavi.gif") -587px 0 no-repeat;
width:240px;
}
ul#globalnavi_list li#gn_contact a:hover {
background:#232323 url("../../common/globalnavi.gif") -587px -73px no-repeat;
}
ul#globalnavi_list li#gn_contact a.on {
background:#232323 url("../../common/globalnavi.gif") -587px -146px no-repeat;
}
ul#globalnavi_list li#gn_last a {
background:#232323 url("../../common/globalnavi.gif") -827px 0 no-repeat;
width:123px;
}
ul#globalnavi_list li#gn_last a:hover {
background:#232323 url("../../common/globalnavi.gif") -827px -73px no-repeat;
}
ul#globalnavi_list li#gn_last a.on {
background:#232323 url("../../common/globalnavi.gif") -827px -146px no-repeat;
}
質問投稿日時：08/03/13 18:03
質問番号：3859667
この質問に対する回答は締め切られました。

回答

 
回答者：abril > 以下のソースで三段階で設定しましたが、FIREFOXで表示できました。
> IEだけ表示できなかったです。

ul#globalnavi_list {（省略）}でlist-style: none;としていないので、Firefoxではリストマークが思いっきり画面上部に点々と黒丸の様に表示（IE6.0/7.0では表示されず）されていますが、そちらの見え方の方が「正しい（＝質問者様の意図された状態）」なのですか？

あと、ソースから想像するに、ナビ画像のon/offを全てまとめて一枚の大画像にして背景にし、<a>での表示位置をマイナス値で調整することでロールオーバーの様な効果を与える、という昨今はやりの（？）やり方みたいですが、実際の画像がないと「何が表示できて」「何が表示できない」状態かは第三者にはわかりかねると思うのですが。
※各bakcgroundプロパティのleftとtopの値を見ればだいたい想像は付きますけど、その数値自体が実際の画像の構成に対して妥当でない場合もあるかもしれませんし。

とりあえず、ソースをそのままコピーして、globalnavi.gifの変わりに手持ちの500×250くらいの写真の画像に差し替えて表示させて見ました（横幅が足りないので前半分ぐらいしか表示されませんが）が、私の環境（Windows XP）でテストする限りは、文頭のリストマークの表示以外、IE6.0とFirefox2.0での「違い」は見られない様に思えましたが…

「IEだけ表示できなかった」というのは、IE（6？7？）でのみ、背景画像globalnavi.gifが全く表示されなかった、という事でしょうか？それとも、マウスオーバーした際に表示される状態が、意図した位置に出てこない、という事でしょうか？
種類：補足要求
どんな人：専門家
自信：参考意見
回答日時：08/03/13 21:23
回答番号：No.1
この回答へのお礼三日間でずっと悩んだ問題やっと解けました。
list-style: none;タグが初期化CSSデータの中に書いてありますので、問題全然ありませんでしたが。結局、画像の拡張子がちょっと問題がありまして。。。ご意見の画像に差し替え仕方でやっとわかりました、本当にありがとうございました。
 
スポンサーサイト（詳細）
このページのトップへ