• 締切済み

IE8で追加したcss背景画像が表示されません

新しく追加した背景画像がFireFoxでは表示されるのにIE8だと表示されません。 ↓はソースで、「FILE3.gif'」が表示されません。 ------------------------------------------ <css内より抜粋> -css1.css- h2 { width: OOOpx; height: OOpx; background-repeat: no-repeat; background-position: O% OO%; } ※数値の部分は伏せています。 -css2.css- h2.hoge1{ background-image: url('画像場所/FILE1.gif'); } h2.hoge2{ background-image: url('画像場所/FILE2.gif'); } h2.hoge3{ background-image: url('画像場所/FILE3.gif'); } ←新しく追加したもの <jsp内より抜粋> <%@ page contentType="text/html; charset=Shift_JIS"%> <% request.setCharacterEncoding("Shift_JIS");%> ~中略~ <h2 class="hoge3"><font class="none">ホゲ3画像</font></h2> ~以下省略~ ------------------------------------------ 以前からあった背景画像はちゃんと表示されています。 jspで<img src="画像場所/ファイル3.gif">とやれば一応IEでも画像は表示できるのですが、画像の位置がズレてしまうので、この方法はだめそうです。 文字コードはcss、jspともにShift-JISです。 追加した画像はファイル1,2と同じ場所にあります。 また、<h2 class="hoge3">を<h2 class="hoge2">に変更したら、FILE2.gifの画像がIEでも表示されました。(FILE3.gifとFILE2.gifはほぼ同じ大きさです。) どなたか解決策がわかる方、またはどこを調べればいいかわかる方いましたらお願いします。

  • CSS
  • 回答数1
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

h2.hoge2{ background-image: url('画像場所/FILE2.gif'); } h2.hoge3{ background-image: url('画像場所/FILE3.gif'); } ←新しく追加したもの を h2.hoge2{ background-image: url('画像場所/FILE3.gif'); } h2.hoge3{ background-image: url('画像場所/FILE2.gif'); } としてみたら・・ なお、<font・・は非推奨です。

nori_midi
質問者

補足

回答ありがとうございます。 FILE2とFILE3の記入を入れ替えてみました。 h2.hoge2{ background-image: url('画像場所/FILE3.gif'); } h2.hoge3{ background-image: url('画像場所/FILE2.gif'); } hoge3を使っていたページを確認したところ、  IE8:表示されない  FireFox:FILE2 が表示 という結果になりました。 どうもIE8だと表示されません。 一方hoge2を使っていたページですが・・・  IE8:FILE2 が表示  FireFox:FILE3 が表示 と、IEが指定していない画像を表示してきました。 一体なぜ・・・

関連するQ&A

  • IE6でのみCSSの背景が見えない

    度々すみません。 CSSで見出しの設定をしているのですがなぜか<h2>見出し2の背景画像だけIE6で見えません。 Nescape,safari,firefoxでは問題ありません。 しかも他の見出しは同じ手順で作成、記述しているのに全て見えています。すごく不思議です。 記述は下記の通りです。 //-----css #main h2 { font-size: 9px; color: #FFFFFF; background:no-repeat; margin: 10px 0px; padding: 0px; height: 44px; width: 595px; font-size: 9px; color: #FFFFFF; height: 44px; width: 595px; margin: 8px 0px 0px; } .PROFILE { background:url(../image/ttitle_company.gif)} .COUNSUL { background:url(../image/ttitle_con.gif)} .PRODUCTS { background:url(../image/ttitle_products.gif)} .BACKGROUND { background:url(../image/ttitle_company.gif)} .CASESTUDY { background:url(../image/ttitle_case.gif)} //-----HTML <h2 class="PROFILE"><em>会社情報</em></h2> 的確なご意見以外にも何か疑われる事があれば教えて下さい。 よろしくお願い致します。

  • CSSで画像表示のやり方を教えてください

    初めまして、CSSを少し勉強中なんですが、文字の背景に画像を張りたいんですがうまくいかないので教えていただけないでしょうか? 今の状態はこんな感じです。 間違っていますか? HTMLファイル <TD colspan="3" width="609"><div class="menu1">aaaaaaaa</div></TD> CSSファイル div.menu1 { background-img : url(object.gif); } この二つのファイルを使っているんですが画像が表示されなくて困ってます。教えていただけるとうれしいです。 ご迷惑おかけしますがよろしくお願いします。

  • 見出し<h3>にリンクを追加すると背景画像が表示されない

    h3の見出しに<a>を追加するとh3に設定していた見出し画像がIEで表示されなくなってしまいました。 FireFoxではきちんと表示されているので IEのバグかと思っているのですが、 もし解決方法がありましたら、アドバイスいただければ幸いです。 [HTML] <div class="contents"> <h3><a>見出し</a></h3> </div> [CSS] .contents h3 { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} 色々と試してみたんですが、 たとえば、以下のように見出しの文章の一部にリンクを張ると 見出しの背景画像がきちんと表示されました。 [HTML] <div class="contents"> <h3>見<a>出し</a></h3> </div> また、CSSに以下を追加してみたんですが 背景画像が二重になって表示されてしまいました。 [CSS] .contents h3 a { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} よろしくお願いします。

  • cssで背景画像が貼れない

    background-image: url(××.gif) cssで背景画像を表示させたいのですがこのタグだとどうしても 表示されません。 画像は同じフォルダにあります。 どなたかご教授願えませんでしょうか お願いします。

  • 画像をCSSのurlを使って表示する方法

    ./gazou/background/bg005.gifこちらに画像ファイルがあるのですが、この画像をCSSのurlを使って表示するときどのように指定すればよいのでしょうか? ./basecss.cssに background-image :url("./gazou/background/bg005.gif");と記載してもうまくいきません。 カレントデイレクトリはすべて同じデイレクトリです。 CSSもカレントデイレクトリは./ではないのでしょうか?ほかのフォルダにある画像ファイルは問題なく表示されます。 {background-image:url("../test/gazou/background/bg006.gif"); 上記はうまくいく。

    • ベストアンサー
    • CSS
  • CSSを用いた背景画像の表示方法

     お世話になります。  ホームページ作成の初心者です。  H1タグ(大見出し)の箇所に、文字付きの画像を貼付けようと思ったのですが、重くなる、との考えから、CSSにて背景画像で表示したいと考えております。  本来ならば、HTMLファイルとは別途、CSSファイルを作成し、これを読み込ませるのが一般的とお聞きしました。  ですが、添付画像ファイル(中に、”猫集まれ”と記載したいです)を、HTMLソース内部に、直接書き込みたいと思っております。  どのようにすればよろしいでしょうか?  因に、以下の情報を載せさせていただきます。 <h1>猫集まれ!</h1> url("img/flower10.gif") background-repeat: no-repeat; padding-left: 30px; line-height: 120%;  ご教示の程、よろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • 画像が表示されません

    cssを使って、ホームページを作成しようとしています。 ファイルの構成は \MyHP のフォルダーの下に\image と \style と index.html としており、\image の中に 画像の hana.gif を入れ、\style の中に style.css の名前でcss ファイルを書いています。 hana.gif を画面の左端に並べようとして、cssには body {background-image:url(image/hana.gif); background-repeat:repeat-y; background-attachment:fixed} と書いています。 勿論 index.html の <header> には <link rel="stylesheet" href="style/style.css" type="text/css"> は書いています。 しかし、何も表示されません。 background-color:#ffff00; と書き換えると、画面は黄色一色に変わります。 他のことでも試していますが、どうも background-image:url(....) となるとうまくゆかないようです。 background:url(......)としてもダメです。 何が悪いのでしょうか。現在はIE7を使用していますが、IE6でもダメです。 画像ソフトで hana.gif を確認しましたが、問題なく画像が表示されます。

  • ieでだけ背景画像が表示されません

    internet explorerのすべてのバージョンにおいて、背景画像が反映されません。firefoxやopera、safariでは問題なく反映されます。 HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body background="haikei.jpg"> てすと </body> </html> CSS: body {font-family:"MS Pゴシック";background-image:url(haikei.jpg);background-repeat:repeat;} なにが問題なのかわかる方、教えてください。よろしくお願いします。

  • IEだけ背景が出てこない。。。

    みなさま、こんにちわ。いつもお世話になっています。 みなさんにお尋ねします。 CSSで背景を指定しているのですが、IEだけなぜか表示できません。 html側はこうしています。 <div class="ttlh2"> <h2>新着情報</h2><p>News</p> </div> そしてCSS側はというと、 .ttlh2   { width:676px; height:34px; display:block; background:url(../img/sub_h3_bg.gif) 0 0 no-repeat; margin-bottom:5px; } .ttlh2 h2 { font-size:16px; float:left; background:none; display:inline; font-weight:normal;} .ttlh2 p  { font-size:16px; float:right; color:#FFFFFF; margin:6px 5px 0 0; display:inline; background:none;} というようにしました。Firefoxなどでは問題なく表示できるのですが、IEだけ見えません。 何が問題なのでしょうか。 ご存知の方いらっしゃいましたらご助言ください!

    • ベストアンサー
    • HTML
  • 印刷用CSS IEのとき、画像が印刷できない

    現在、ホームページを作成し、印刷用のcssの作成をしております。 そこで、chromeやsafariでは表示できるのに、ieでは印刷時に画像が表示されない部分があります。 以下のようなhtml、cssにてコーディングしております。 【HTML】 <div class="hoge">   <a href="./">Top</a> </div> 【print.css】 .hoge a{ content: url("../images/print/img_header_pr.jpg"); position: absolute; top: 9px; left: 9px; } IEで表示させるには、どのようにすればよいのでしょうか

    • ベストアンサー
    • HTML

専門家に質問してみよう