- ベストアンサー
firefoxで部分的に背景色が反映されない。
またまたCSS関連の質問です。 body直下に全体を包括するブロックの<div id="container">を設定し、containerの中に3段組（左中央右の3カラム）でレイアウトを組んでいます。 widthはbodyが100%指定、containerは80%指定でセンタリングしてあります。 質問なんですが、 ・bodyのbackground-imageに画像を指定し、 ・containerのbackground-colorに#ffffffを指定しており、 ・3カラムそれぞれの表示要素（コンテンツテキストとか）は、中央が一番縦に長く、左と右はメニュー程度なので下半分くらいが空白になっている状況です。 ・その際、firefox上では、左/右カラムの背景色が、要素がある部分（テキストで埋まってしまっている部分）までは#ffffffとなっているのですが、そこから下（空白部分）がbodyの背景イメージを透過してしまっているのです。 本来なら、bodyに指定した背景イメージは、container幅の80%には表示されない筈なのですが。。。 ちなみに、IE6だと、計算通り左・右カラムとも、一番下部までちゃんと背景色が#ffffffとなっており、できればfirefoxでも同様のデザインを実現したいのですが、ご助言頂けますでしょうか？ なかなか説明が難しく、分かりにくい文章になってしまってすみませんが、よろしくお願いします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- fire--
- ベストアンサー率49% (146/293)
ちょうど同じ問題に引っかかって、一番外をテーブルで覆ってごまかして たのですが、このQAを見つけてためした所、うまく行きました。 細かいいろんなパラメータが絡み合っていて、一見関係ないものが 影響しているのかもしれません。 自分のうまく行った例を挙げておきます。 http://www.fsiki.com/archive/css-doc/float.htmlに書いてあった IE対応を特に入れなくてもOKでした。 ---------------------------------------------------------------- #body{width:780px; margin:0px auto 0px auto; padding:0px; border:0px; text-align:left; position:relative; background:#f4ffee; /*eeffdd*/ } #body:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } #maincenter_2 {float:left; width:610px; margin:0px; padding:0px;} #mainright {float:left; width:165px; margin:0px; padding:0px;}
補足
自己解決しました！ どうやら、containerに苦し紛れにheight:100%;を指定していたのが悪かったようです。height指定を削除したら、きちんと全体を包んでくれました。 お答え頂いた皆様に御礼を申し上げます。
- CHI-512
- ベストアンサー率69% (63/91)
こんにちは。時間がないので手短に。 ボックスの順番はどうなってますか？ 下のような順番で試してもだめですか？ <div id="container"> <div class="left"><p>左</p></div> <div class="right"><p>右</p></div> <div class="center"><p>中央</p></div> </div>
補足
はい、ボックスの順番は container left right center footer です。 80%の幅内は、containerが一番下に存在するはずですよね。 であれば、floatさせたleftとrightのheightが短かろうが、その下にはcontainerの白背景が来るはずだと思うのですが。floatさせてなくて、left・center・rightが横に3つ並んでいるだけなら、center部分だけが白背景なのは理解できます。でも、floatさせてるのに・・・ 自分でも色々調べていますが、いまだ解決策見つからず、です（泣）。
- himajin100000
- ベストアンサー率54% (1660/3060)
>floatの内容は親要素の高さには参入されない ちなみにこの様子はFirefox拡張のWebDeveloper,あるいは，同じく拡張のDOM Inspectorで見ると非常にわかりやすい
補足
と言うことは、この現象自体が正しい挙動ってことなのでしょうか？floatの背景色をページ下部まで有効にする方法はないものでしょうかね？？
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ width:100%; background-image:url("nutrition-pie-chart.png"); } div#container{ background-color:pink; width:80%; /* 何故うまくいくのかを考えたことはない。 IE,Fx,Operaでは有無により変化するが，その他のブラウザで上手く行くことは保証できない 確かデフォルトではfloatの内容は親要素の高さには参入されないFirefoxの挙動の方が正しいって聞いたような。 overflow:auto; */ } div#breakfast{ background-color:red; float:left; } div#lunch{ background-color:green; float:left; } div#supper{ background-color:yellow; float:left; } </style> <title>サンプル</title> </head> <body> <!-- こういうことか？--> <div id="container"> <div id="breakfast"> <ul> <li>あんぱん</li> <li>コーヒー牛乳</li> </ul> </div> <div id="lunch"> <ul> <li>てりやきマックセット</li> </ul> </div> <div id="supper"> <ul> <li>鮭のムニエル</li> <li>マカロニサラダ</li> <li>牛肉コロッケ</li> </ul> </div> </div> </body> </html>
補足
書いて頂いたサンプルを保存してfirefoxで開いてみると、やはりそれぞれの背景色は揃ってませんね。。。それがイヤなんですよね。きちんと一番下まで背景色がイキて欲しいんです。
関連するQ&A
- 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; }
- ベストアンサー
- CSS
- 背景リピート―反映されない
背景をリピートしたいのですが、反映されません。 ～HTML～ <body> <div id="container"> <div id="about"> ここに背景をリピートさせたい。 </div> </div> </body> ～CSS～ #container #about { background-image: url(img/○○.jpg); background-repeat:repeat-y; } これだけでは駄目なのでしょうか？ 全くの無知で申し訳ありません。。
- ベストアンサー
- その他([技術者向] コンピューター)
- Firefoxで背景画像が表示されず困っています
サイトを作り確認してみたところ、 IEでは背景画像がきちんと表示されるのですが Firefoxでは表示されないようです。 下記のように入力しているのですが、何が原因なのかわかりません…。 詳しい方、教えていただけないでしょうか。 <!-- BODY { background-image: url(http://aaaaa.jpg); background-color: #ffffff; background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; } -->
- ベストアンサー
- HTML
- IE7で閲覧した際にCSSで配置した背景画像がずれる
スタイルシートにて、 以下のように設定して背景画像を表示させているのですが、 body { font-size: 70%; line-height: 140%; word-spacing: 1pt; margin: 0; padding: 0; text-decoration: none; text-align: center; letter-spacing: 0.1em; background-image: url(../images/body_bg.gif); background-color: #FFFFFF; background-repeat: repeat-y; background-position: center top; } マックのsafari、firefox、WINのIE6、firefox等では問題なく センターに背景画像が配置されて表示されるのですが、 IE7で表示すると、横に余分な空白が生じて、 背景画像のみが左のほうにずれてしまいます。 おおよそですが、bodyの横幅が右に2倍に 増えている感じで、スクロールバーを右に動かすと、 意味のない空白ができています。 IE7のハックというものを使用して、上記のbodyタグの下に 背景画像の設定を外した、下記の記述を追記し、 さらに、.bodybgというクラスタグで 背景画像を設定してみたのですが、結果は同じでした。 *:first-child+html body { font-size: 70%; line-height: 140%; word-spacing: 1pt; margin: 0; padding: 0; text-decoration: none; text-align: center; letter-spacing: 0.1em; background-color: #FFFFFF; } *:first-child+html .bodybg { background-image: url(../images/body_bg.gif); background-repeat: repeat-y; background-position: center top; } どうしたら、背景画像のずれが直るのでしょうか？ また、このバグはbodyタグではなく、その他のスタイルが 影響しているのでしょうか？ どなたかご存知の方お教え願えませんでしょうか。 よろしくお願い致します。
- 締切済み
- HTML
- Firefoxのみ下に空白が出来るバグ
背景を２枚使用し、それぞれ上と下に固定して、本文がのびると真ん中（画像のない場所）がのびるようにしたいのですが、 Firefoxのみ、下の画像に空白ができて埋まりません。 画像は、bodyに下の画像を、containerに上の画像を入れています。 いい方法はないでしょうか？ ----html------------------ <html> <body> <div id="container"> </div> </body> </html> ---css------------------ body{ background-image:url(../images/back_01.jpg); background-repeat:repeat-x; background-position:bottom; margin:0 auto; height:100%; } div#container { background-image:url(../images/back_02.jpg); background-repeat:repeat-x; width:100%; height:100%; margin:0 auto; text-align:center; } ちなみにhtmlにcssでheight：100％などを入力すると、画像が消えて表示されなくなります。 よろしくお願いします。
- ベストアンサー
- CSS
- 背景画像を二つ指定
こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 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
- ＣＳＳで背景にグラデーションをかけたいけどできません。
filter: progid:DXImageTransform.Microsoft.Gradient (StartColorStr=#000099, EndColorStr=#ffffff, GradientType=0) これをcssファイルのbodyのところに下記のように 付け加えたのですが反映されません。 BODY{ font-style:normal font-weight:normal font-size:small text-align:center;/ color:#000000 filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#000099, EndColorStr=#ffffff, GradientType=0) } 元は背景色と背景画像が指定してあった部分 background-color:#ffffff;/ background-image:url(./img/back.gif);/ を消してそこに入れたのですがそれは問題ないですよね？ 教えてください、お願いします。
- ベストアンサー
- CSS
- 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
- oveflow、margin等の表示について質問です
以下のようなhtml （XHTML 1.0 Transitional、文字コードはUTF-8） <body> <div id="wrapper"> <div id="container"> test </div> </div> </body> で、bodyにリピート有りの背景、wrapperにx軸にリピートの背景、containerにリピート無しの背景と背景色に白をcssで設定しました。 containerは中央揃えで上に35pxの空きをもたせたいのですが、containerに「margin-top:35px」とするとIE（6、7）では意図した通りに表示されるのですがfirefoxだとwrapperにも35pxの空きができてしまいbodyの方の背景が見えてしまうといった状態になりました。 containerのmargin-topを指定せず、wrapperに「padding-top:35px」を指定する、または、containerのmarginはそのままでwrapperに「overflow: hidden」を指定すると両方のブラウザで意図した通りに表示されました。 ただ、paddingを指定した方はわかるのですが、なぜoveflowで、しかもhiddenで解決できたのかが全くわかりません。個人的な感覚ではcontainerのmarginをいかす方法で進めたいのですが…。 変な質問ですが、なぜこれで解決できたのが教えていただけると助かります。根本的に間違っている点などもありましたらご指摘していただければ幸いです。説明下手ですが何卒、よろしくお願いいたします。 ---元のcss--- html,body { height: 100%; margin: 0px; padding: 0px; } body { background-image: url(../img/***1.jpg); background-repeat: repeat; background-position: left top; height: 100%; } #wrapper { background-image: url(../img/***2.jpg); background-repeat: repeat-x; margin: 0px; padding: 0px; width: 100%; } #container { background-color: #FFFFFF; background-image: url(../img/***3.jpg); background-repeat: no-repeat; background-position: left top; width: 850px; margin-right: auto; margin-left: auto; height: auto; min-height: 620px; margin-top: 35px; }
- ベストアンサー
- CSS
補足
http://www.fsiki.com/archive/css-doc/float.htmlで書いてある解決法ですね。 ちょっと言葉足らずでしたが、footerはclear: both;でfloatを解除する形で指定してあります。 全体の構成は、 body：width100%、background-image指定アリ -container→width80%、センタリング、background-color指定アリ（white） -header→width設定なし -leftmenu→float:left -maincontents -rightmenu→float:right -footer→clear: both ってな感じです。 今回やりたいことは、 ・container：width80%の外側（左右10%）部分に、bodyに指定した背景画像を出したい。 ・container：width80%の内側はbackground-color:whiteで塗りつぶしたい。 ということです。 しかし、中央のmaincontents部分にテキストコンテンツをたくさん記述しているために、ページ自体は長くなっているのですが、leftとrightのfloatボックスのコンテンツはmenuのみのため、ボックスのheightは短くなっちゃってます。 そうした時に、中央のmaincontentsは白背景なのですが、leftとrightはボックスのheightが短く切れてしまうため、ボックスの下部にbodyで指定した背景画像が出てきてしまっているのです。 これを、container：width80%を白でベタ塗りするような処理はできないものかと思い、質問した次第です。