• ベストアンサー

背景色が出ません。

CSSで bodyに背景画像、 wrap全体にbackgroundで色の指定、 wrapの中のdivにもbackgroundで色の指定をしていますが、divのbackground色が出てきません。 wrapの指定色が利いたままです。 ブラウザはFirefoxです。 IEでは問題ないのですが・・・。 どのようにしたら、Firefoxでもbackgroundの色が利くようになりますか?

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

「divの中身がfloatしてる」に一票。 要するに正しい解釈ではdivの高さが0になるような状況なんでしょ うね。IEはバカだから解釈を間違ってdivに高さがあるかのように振 る舞っていると。clearfixなどのキーワードでググルと幸せになれ るかもしれません。

shizuku
質問者

お礼

色々やってみたのですが、わからず(涙)結局1色1px四方の背景画像を指定することでとりあえず、無理やり解決しました。 ありがとうございました。

shizuku
質問者

補足

ご回答をありがとうございます。 現在のCSSですが、#servicenavのDIVではfloatしていません。 入れ子が原因なのでしょうか。 body{ text-align: center; background: url(xxx.gif) repeat-x #FFFFFF; } #wrap{ width: 820px; margin: 0 auto; background-color:#FFFFFF; } #servicenav { width: 820px;   background-color:#666666; } #servicenav ul { text-align: center;   padding: 2px 1px; } #servicenav li { display: inline; margin-left:1px; }

関連するQ&A

  • 背景画像を二つ指定

    こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか? 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }

    • ベストアンサー
    • HTML
  • 背景がずれる

    bodyに背景画像を指定しています。 wrapの中のdiv要素にやはり背景画像を指定しています。 このとき、この両方の画像の柄(横直線ラインのもの/X方向のみ繰返し)をきっちり合わせたいのですが、IEとFirefoxではラインが合ってくれません。 IEに合わせようとすると、Firefoxでは1pxほど上にdivの部分が上がってしまいます。 他の要素でPaddingやmarginも使っていません。 合わせる方法はないでしょうか。 まる2日悩んで、色々と検証しましたがホトホト疲れました・・・。教えてください。

    • ベストアンサー
    • HTML
  • 背景画像表示について

    CSSでbodyの中にbackground-image で背景を設定したのですが IE以外ではうつっていませんでした。 なので <div style="width : 1300px;      height : 1000px;      top : 1px;      left : 2px;position : absolute;      background-image: url(****.gif);      z-index: 1;      visibility : visible;      " id="pagebody"> としてみましたらIEとGooglechromeはうつるようになりました。が、 firefoxではうつりませんでした。ここで疑問に思ったのが 基本なはずの背景画像にブラウザによって表示が異なるのか、と。 本を読んでもインターネットで調べてもそんなことはないとかいてありました。 僕の記述が間違っているとしか考えられません。 正しい記述を教えてください。 ちなみにCSSは外部内部両方ためしました。 htmlでbodyに背景指定もやってみました。でもやっぱりIEしかうつりませんでした

    • ベストアンサー
    • HTML
  • CSSで「html」にも背景指定をするのはどのような場合?

    CSSで「html」にも背景指定をするのはどのような場合? CSSの背景指定に関する質問です。 ページ全体の背景色や背景画像を指定する場合、 自分は下記のように記述をしています。 body { background:url(画像名) repeat-x #背景色; } しかし、たまにhtmlにも背景を指定しているものを見かけます。 下記のような感じです。 html,body { background:url(画像名) repeat-x #背景色; } どういったケースでhtmlにも背景を指定する必要があるのでしょうか? もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、 何か不具合が起こる?と思い自分なりに実験してみましたが、 特に何も変化は無しでした。 (Firefox、IE6でチェック) 分かる方いらっしゃいましたら回答をお願いいたします。

    • ベストアンサー
    • CSS
  • CSSで背景画像が表示されない

    CSSレイアウトで通常のHTMLで作成しています。 背景画像が表示されないくて困っています。 他の方の質問で似た事例があったのと、 情報サイトを見てみたのですがどうしても上手くいきません。 この場合floatとclearはどう使えば背景が表示されるのでしょうか? http://oshiete1.goo.ne.jp/qa3882745.html http://2nose.com/css/?ID=120 bodyには別背景を指定してあるのでbodyへの指定はできません。 何かアドバイスがあれば教えて頂けますでしょうか。(__) 確認はIE8です。 [ css ]----------------------------------------------------- #wrap{ width: 920px; height: 100%; margin-left: auto; margin-right: auto; background: url(../img/background.jpg) repeat-y; } #contents{ clear: both; } #sidemenu{ width: 275px; float: left; } #mainbox{ width: 570px; float:right; } [ html ]---------------------------------------------------- <div id="wrap"> <div id="contents"> <div id="sidemenu">サイドメニュー内容</div> <div id="mainbox">メインコンテンツ</div> </div> </div> 以上です、よろしくおねがいします!

    • ベストアンサー
    • HTML
  • IE6で、背景画像とコンテナを常に中央表示させたい

    bodyの背景画像と、コンテナを ブラウザウインドウ幅に対して、 常に中央表示させたいです。 IE7、8、FireFox、Safari では上手くいっているのですが、 IE6だけ、うまく行きません。(何故かずれてしまいます) コードは以下です ------------------------------------------------------- ●HTML <body>   <div id="container"></div> </body> ●CSS body{   background: url(画像のパス) no-repeat;   background-position: center top;   text-align: center; } container{   width: 900px;   margin: 0 auto; } ----------------------------------------------------------------------------------- どうやらIE6では、 コンテナも bodyに置いた背景画像も だいたい中央表示されているのですが 軸がズレている??ようなかんじで お互いがずれて、だいたい真ん中、という感じになってしまいます。 どなたか詳しい方いらっしゃいましたら よろしくお願いいたします。。

    • ベストアンサー
    • HTML
  • IE6ブラウザへの対応で行き詰ってしまったので、ご意見をお聞かせくださ

    IE6ブラウザへの対応で行き詰ってしまったので、ご意見をお聞かせください。 以下htmlの一部 <html> <head> <title></title> </head> <body> <div id="hoge"> 中央に表示されます。 </div> </body> 以下スタイルシートの一部 body { background:url("./background1.gif") no-repeat scroll left top; } #hoge { background:url("./background2.gif") no-repeat scroll left top; margin-left:auto; margin-right:auto; } <body>と<div>にそれぞれ、絵柄は同じだけど色が違う背景画像を設定しています。 目的は、ブラウザの横幅を広げた時に背景がずれないようにするためです。 FireFox3.6、IE7、IE8、GoogleChlomeでは目的の動きを取ることを確認できたのですが、IE6ではそうなりません。 IE6では、<div>に設定した背景画像の開始位置が、<div>の範囲(開始位置)になっているのです。 <body>のように、ブラウザの開始位置に配置したいときはどのようにしたらいいのでしょうか? cssハックを使って、IE6だけpositionでずらすという方法も試したのですが、 それだと背景にずれが生じてしまうため、あきらめました。 他にも何か良い方法がありましたら、お聞かせいただけると助かります。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • CSS dlタグの背景色についての質問です

    cssで<dl>全体に背景色を指定しているのですが、firefoxとIE8は背景色がつきません。 IE6とIE7は背景色はつきましたが・・・ どうしたらどのブラウザでも<dl>全体に背景色をつけることができるのでしょうか? どなたか教えていただけますでしょうか? よろしくお願い致しますm(_ _)m

    • ベストアンサー
    • CSS
  • 背景画像を2枚使いうまく繰り返す方法

    htmlとcssでホームページを作っています。 背景画像を2枚使用しているんですが、どうしてもうまく表示されません。 1枚目はページ上部に。 2枚目はその下からすべて。 で、それぞれ横にリピート。 2枚目だけ縦にリピートして表示させようとしてます。 最初はbodyとdivで -------------------css-------------------------- body { background-image:url(""); background-repeat:repeat; } div.body { background-image:url(""); } ----------------html-------- <body> <div class="body"> 内容 </div> </body> --------------------------------------------- としています。 ですが、これだとdivのボックスができてしまい、横に無限に繰り返されないことになります。画面を縮小した時に切れてしまいます。 なので、htmlとbodyにそれぞれ背景をつけたんですが、 今度は両方の画像が表示されませんでした。 html { background-image:url(""); background-repeat:repeat-x; } body { background-image:url(""); } htmlのほうを消すと、bodyで指定した画像が縦横無限に繰り返されます。 htmlを消さずにbodyを無限に表示されるにはどうしたらいいですか?

    • ベストアンサー
    • HTML
  • 背景をCSSで

    背景の色や壁紙をCSSで指定したいのですがCSSでの指定の仕方がわかりません。 HTMLの<body background=>ならわかるんですが どうしてもCSSで指定したいのでCSSでの指定のはわかりましたら教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう