ボックスに背景を指定した時、firefoxでうまく表示されない
- ボックスに背景を指定した際、Firefoxでは正しく表示されない現象が発生しています。
- サンプルコードを使用して、問題の再現を試みましたが、背景画像が表示されませんでした。
- CSS初心者のため、どのように修正すればいいのかわかりません。助言や解決策を教えていただけると幸いです。
- ベストアンサー
ボックスに背景を指定した時、firefoxでうまく表示されない
CSS初心者です。 タイトルの通りなんですが、ボックスにbackground-imageで背景を指定して、ブラウザで表示させると、IE6.0だとちゃんと表示されますが、firefoxだと表示されません。 サンプルソースを書きます。 -HTML- <div id="formbox"> <div id="box01">テストテスト</div> </div> -CSS- #formbox{ background-image: url(./img/bg.gif); background-repeat: no-repeat; width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; background-color:skyblue; float:left; } どなたかご教授お願いできませんでしょうか。 よろしくお願いいたします。
- webdirecter2006
- お礼率100% (2/2)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
IE6 とFirefox1.5 で試してみましたが、両方とも表示されました。
関連するQ&A
- HP作成で背景画像が表示されないです・・
いつもお世話になっております。 今回は、HP作成のことでご指導いただきたく投稿致しました。 説明が上手くできていないと思いますが 宜しくお願い致します。 参考書片手にCSSにトライしていますが 一部、背景画像が表示できず困っています。 ネットで調べていますと「float」を使っている場合について 対処法が色々掲載されているのですが 何か間違っているようで、どれを試しても 背景画像を表示することができません。 下記にhtmlとｃｓｓを簡単に貼り付けました。 説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。 － html － <body> <div id="container"> <div id="header"> →背景画像表示されます。 <p>＊＊＊＊＊</p> </div> <div id="box"> <div id="left"> →背景画像表示されます。 <p>＊＊＊＊＊ </p> </div> <div id="right"> →背景画像表示されません。テキストは表示されます。 <p>＊＊＊＊＊</p> </div> </div> <div id="footer"> <p>＊＊＊＊＊</p> </div> </div> </body> － ｃｓｓ － #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }
- ベストアンサー
- ホームページ作成ソフト
- Firefox2.0で背景が上段に集まってしまいます。
以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "ＭＳ Ｐゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer { clear: both width: 900px; background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・（ロールオーバーリンク） </div> <div id="header"> ・・・・・（MPEG画像） </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>
- 締切済み
- CSS
- firefoxでfloaｔの調整の仕方CSS
CSSで下記(div)のなかにBOXを3つ並べました、 ie6以上では思い通りに表示されるのですがFireFox（バージョン3.5.3）では一番右端にくるBOXが左端のBOXの下に入ってしまいます。 どなたか解決策を教えていただけますでしょうか？ ----ソース部分--- <div class="setbox1"> <div id="rent1"><a href="eee.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent2"><a href="aaa.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent3"><a href="ccc.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> </div> ----以下CSS---- .setbox1{ margin-left : 25px; width : 750px; } #rent1{ margin-top : 20px; margin-left : 0px; float : left; width : 234px; } #rent1 a{ background-image : url(img/rent1.gif); display : block; line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; } #rent1 a:hover{ background-position : left bottom; } #rent1 img{border-width : 0px 0px 0px 0px; } #rent2{ margin-left : 0px; float : left; margin-right : 22px; padding-left : 22px; width : 234px; margin-top : 20px; } #rent2 a{ background-image : url(img/rent2.gif); display : block; background-repeat : no-repeat; line-height : 0px; width : 234px; height : 69px; } #rent2 a:hover{ background-position : left bottom; } #rent2 img{border-width : 0px 0px 0px 0px; } #rent3{ margin-top : 20px; margin-left : 0px; padding-left : 0px; } #rent3 a{ background-image : url(img/rent3.gif); line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; display : block; } #rent3 a:hover{ background-position : left bottom; } #rent3 img{border-width : 0px 0px 0px 0px; }
- 締切済み
- HTML
- 背景色を設定しているのにFirefox,Opera等で背景出ない。overflow:hiddenではコンテンツ下部が途中で切れてしまう
CSSでサイトを制作中ですが、背景が出ないことで困っております。 わかりやすくするためレイアウト画像を添付しましたのでレイアウトをご確認ください。 端的に書くと、コンテンツの白色の背景を記述しているのに、なぜか色がでず、両脇の背景色が表示されてしまっています。 このようになってしまうブラウザは、Firefox3,Opera8.5、NS7等です。IEは6なのですが、これだけ大丈夫でした。 でもIE6だけOKではダメなので、調べると、overflow:hiddenで直るような記載を見つけたのでやってみました。 すると、今度は ■IE6でコンテンツが終わっていないのに、途中で切れてフッターが出現してまう ■ミドルコンテンツであるdiv id="mdl"の中の左サイドバーと右コンテンツが両端に離れてしまい、間が開きすぎてしまう。 というようになってきました。どうやって回避すればよいでしょうか？ 以下ソースです。 ●CSS ------------------------------------------------------------ div#hdr-wrap { background:url(../img/cmn/hdr_bg.gif) repeat-x; top:0px; width:100%; height:120px; text-align:center; } div#hdr { width:900px; _width: 902px;/*IE対策*/ height:120px; margin-left: auto; margin-right: auto; text-align: left; } div#gbnavi-wrap { background:url(../img/cmn/gbnv_bg.gif) repeat-x; top: 120px; width:100%; height: 51px; text-align:center; } div#gbnavi { width: 900px; _width: 902px;/*IE対策*/ top: 120px; height: 51px; margin-left: auto; margin-right: auto; text-align: left; } div#main-wrap { top:171px; width:100%; height:100%; background: url(../img/cmn/bg.gif) repeat; text-align:center; } div#main { overflow: hidden;/*BGcolor表示対策(Firefox,Opera,NS)*/ width: 920px; _width: 922px;/*IE対策*/ height:100%; background: #fff; border-left-color: 1px solid #000; border-right-color: 1px solid #000; margin-left: auto; margin-right: auto; text-align: left; } div#ftr-wrap { clear: both; width: 920px; _width: 922px;/*IE対策*/ height:151px; background: url(../img/cmn/ftr_bg.gif) repeat-x; border-left-color: 1px solid #000; border-right-color: 1px solid #000; margin-left: auto; margin-right: auto; text-align: center; } div#footer{ clear: both; color: #415880; width: 900px; _width: 902px;/*IE対策*/ height:151px; margin-left: auto; margin-right: auto; text-align: left; } ------------------------------------------------------------ ●HTMLソースは、単にくくっているだけです。 <div id="hdr-wrap"> <div id="hdr"> </div> </div> <div id="gbnavi-wrap"> <div id="gbnavi"> </div> </div> <div id="mdl-wrap"> <div id="mdl"> </div> </div> <div id="ftr-wrap"> <div id="ftr"> </div> </div> ------------------------------------------------------------
- 締切済み
- HTML
- Firefoxで真ん中に表示されない
こんにちはCSSでの疑問なんですが下記のように コードを書いて、CSSで"H"のボックスを"F"のボックスの真ん中に 表示されるようにしたいのですが、IE6では表示されるのですが Firefox2では左右は真ん中にあるのですが、上下が動きません。 ご教授おねがいします。 <body> <div id="F"> <div id="H"> </div> </div> </body> #F { background: #000000; height: 200px; width: 200px; } #H { background: #33CCCC; height: 100px; width: 100px; margin: 50px auto 0px; }
- 締切済み
- CSS
- firefoxでcssを使った時背景画像が表示されない
CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);
- 締切済み
- HTML
- Mac OSX でのブラウズで、背景画像が表示されない現象
cssで 背景画像指定、特定の画像だけ見れない状態の訴えです。私自身Macは持っておらず、検証できないのですが、訴えた本人もMacに詳しくないため、詳細内容不明です。ブラウザ種類、ブランクなのか、等、答えて貰えません。 div#MENUJPG { font-size: 16pt; margin: 0px; height: 230px; width: 540px; float: right; background: url('../img/bg/menu.jpg') no-repeat right top; } html上では、このdiv id="MENUJPG" の内部にp tag,a tag がいくつかありまして、メニューリンクとして、jpg上に文字を載せています。レイヤ状態で見えないのか？？と思いきや、同ページの div#STAGE { margin: 0px; padding: 0px; height: 450px; width: 400px; float: left; background-image: url('../img/bg/butai.jpg') ; background-position: 50% 15%; background-repeat: no-repeat; } このjpgは見えているとのこと。このdiv 内も、p tagを使っており、文字をjpg上に載せています。違うのは background で一気に指定していることくらいです。 別ページにて、 p#BABY1 { width :300px; height :200px; float :left; background-image : url('../img/profile/baby.jpg'); background-repeat : no-repeat; margin: 0px; padding: 0px; background-color : #cccccc; } このタイプ、jpg,size,floatは異なりますが、同じスタイルで４つあり、全て見えないとのことです。 同サイト別ページにて、cssで同じように div id="XX"で背景画像指定している箇所がいくつかあるのですが、そちらは問題ありません。 id,float,background or backgroud-image,width,height,single quote,...と同じ使い方であり、原因不明で行き詰まっております。 似たような現象、または、考えうる原因、どうぞご示唆くださいませ。
- 締切済み
- HTML
- ホームページの背景画像が表示されない。
ホームページ作成を行っておりますが、どうしても背景画像が表示しなくて困っております。 構成としては、ものすごく単純な構成なのですが・・。 構成は図に記載させていただきました。 大枠を【Contents】というDiv要素で囲み、 その中に【mainArea】【subArea】をDiv要素配置しております。 【mainArea】はFloat：Left【subArea】はFloat:Rightを設定し左右に配置しております。 【subArea】の中にさらに【6Support】というDiv要素を作り、その中に背景画像を設置したところブラウザにて表示されません。 色々試してみたのですが、どうしても表示されずにお手上げ状態です。詳しい方にアドバイス・ご教授いただければ幸いです。 ※ちなみに、上記構成にて【subArea】に背景を設定すると問題なく表示されます。 【HTML】 <div id="contents"> <div id="mainArea"> id "mainArea" の内容がここに入ります</div> <div id="sideArea"> <div class="6support"> 背景画像をおきたい。</div> </div> </div> 【CSS】 #contents { height: 1000px; width: 960px; margin-right: auto; margin-left: auto; } #mainArea { float: left; height: 800px; width: 700px; } #sideArea { float: right; height: 800px; width: 250px; } #sideArea .6support { height: 400px; width: 240px; background-repeat: no-repeat; margin-left: 7px; background-image: url(images/6supportBack.jpg); } 一応、原状を「 http://soltsuger.web.fc2.com/test.html 」にアップさせていただいております。参考になればご覧ください。 ご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- IEとFirefoxでの背景表示の違いについて （CSS）
いつもお世話になっています。 CSSで枠（text_area）を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。 #text_areaに指定した内容を.contentsに書き写しても同じ状態です。 改善策をアドバイスして頂けないでしょうか？ よろしくお願いいたします。 【html】 <body> <div class="contents"> <div id="text_area">あああああ・・・</div> </div> </body> 【css】 .contents{ width:760px; height:540px; margin:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px; } #text_area { overflow:auto; width:600px; height:395px; margin-top:30px; margin-left:auto; margin-right:auto; background-image: url(haikei.gif);/* サイズ：456×392PX */ background-repeat: no-repeat; background-position:center; background-attachment:fixed; }
- ベストアンサー
- CSS
- 【至急】ボックスの高さ指定
base（３つのボックスを包囲する）のボックスに背景画像をつけています。baseの中にboxを３つ横に並べてます。 ■box左は画像（背景黒でパディングで画像に黒枠をつけているようにみせている※アウトラインでやったらIEだと表示されなかったので） ■box真ん中は仕切り線（背景はなし） ■box右はテキスト（背景グレー）にしてます。 質問内容： box右【テキストの高さ】に合わせて、baseの【背景画像】とbox真ん中の【仕切り線】を延長させるにはどうすればいいのでしょうか？ （html） <div class="base"> <div class="box1_img"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2_line"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3_text"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; } .base { width: 618px; height: 100%;（←分からない？？） margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1_img { width: 130px; height: 97px; margin: 0; padding: 2px; float: left; background: black; } .base .box2_line { width: 2px; height: 100%;（←分からない？？） margin: 0 10px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3_text { width: 450px; margin: 0; padding: 5px; float: left; text-align: left; background: #eee; } ul .list-y{ font-weight: bold; text-align: left; } とっても切羽詰まってます！！ すぐに回答いただけると、とっても助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
ありがとうございます。 自分も今さっき、新しいHTMLにその部分だけを入力したら表示されました。 どうやら、前後のソースがいけないみたいです…。