- ベストアンサー
macのsafariとFirefoxで背景が表示されない
bodyとcontainerで背景をリピートさせています。 WindowsのIE6、IE7、Firefoxでは背景は正常に表示されるのですが、macのFirefoxとsafariでは背景がまったく表示されません。 どうしたら表示されるか、どなたかお教えいただけませんでしょうか。 body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; text-align:center; } #container { width:776px; margin:0px auto; background-image:url(main.gif); background-repeat:repeat-y; text-align:left; }
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- readordie
- ベストアンサー率57% (66/115)
background-image:url("bg.gif"); のようにダブルクォーテーションで囲んでみてはどうでしょうか
お礼
書き込みありがとうございます。 フォルダの中のファイルを大文字から小文字に直すことで解決しました。 CSSをダブルクォーテーションで囲んでも正常に表示されていました。
- abril
- ベストアンサー率69% (388/560)
ご提供のCSSのソースを適当なHTMLから参照し、ダミーのGIF画像を作成して検証してみましたが、とりあえず私のSafari3.0.4 on Mac OSX(10.5.2)では問題なく表示される様ですが…？ 「まったく表示され」ない、という事から想像されるのは、 ・画像形式がMacで表示できないもの ・CSSまわりに不具合がある という事ぐらいですが、単なるGIFファイルという事ですから前者はちょっと有り得ないですよね。ちなみに、問題の2つのGIFファイルのパスへダイレクトにアクセスした場合は、Mac上でも正しく表示されておりますでしょうか？もしそうであれば前者の可能性は完全に否定されます。 となると、CSSの指定の何らかがよろしくないのか、という様にも思えますが、提供されたソースだけを見る限りは別に間違いは見あたりませんし（だからこそこちらのSafariでは表示されているわけで）… 後者と仮定した場合の犯人捜しの一手段ですが、現在のHTMLからbody内を#containerだけにして残りを全部一時的に削除して、さらに#containerの中にはダミーのテキストだけを適量入れただけの状態にした上で、再度表示させて見るとどうなりますでしょうか？ もしそれで2箇所の背景が表示される様になったら、削除した部分のマークアップ及びそれに適用されているCSSの指定のどこかに適切ではない箇所があるのだと想定できますので、あとは#containerの中味を少しづつ復帰させながら不具合の出る箇所を突き止めます。地道な方法ですが確実ではあります。 もし結果が変わらない様でしたらちょっとこの場では想定が困難ですね。
お礼
お忙しいところ検証いただきありがとうございます。 No.1の方へ書きましたように、もともと小文字で保存していたgifファイルが、フォルダの中では大文字に変わってしまっており、小文字に書き直すと正常に表示されました！ 自宅にmaがないので、おっしゃるとおりにやってみようと出社したのですが、無事解決いたしました。 いつもご丁寧な書き込み、本当に感謝しています。
お礼
書き込みありがとうございます。 Windowsは大文字と小文字の区別をせず、macは区別するというのはまったくおっしゃるとおりです。 仕事の関係上Windowsやmacを交互に使ってHPを作成しており、ファイル名はもともと小文字で保存していたのに行き来しているうちに大文字に変わってしまっていて（ファイル名も拡張子も）、macで認識しないなど経験しました。 今回のCSSは小文字になっており、同じように読み込んでWindowsでは正常でmacではリピートされないのです。 周りにこういうことに詳しい知り合いがおらず、質問させていただきました。
補足
big.gifとmain.gifはCSSでは小文字ですが、ファイルの中では大文字になっていました！ 会社にしかファイルがなく小文字のはずだと思い込んでいて、昨夜自宅でお礼の書き込みをしたのですが、今日出社して確認しましたら大文字に変わってしまっていました。 そして大文字→小文字に書き換えると、macでも背景は表示されました！ ありがとうございました！助かりました m(__)m