• 締切済み

Firefoxでfloat設定したら背景が表示されない

Firefoxで親ボックス(maincontent)に背景のbgを設定して、 float設定でレフトメニュー(menu)メイン(mainarea)を入れ たのですが、親ボックスで指定した背景画像が表示されません。 おそらく親ボックスからはみ出た設定になっていると思うのですが 本を見て、「clearfix」を追加したのですが、ダメでした。 .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ display:inline-block;} /*Hides from IE-mac\*/ *html.clearfix{height:1%} .clearfix{display:block;} /*End hide from IE-mac*/ 「clearfix」を入れる場所もおかしいのかも知れないです。 お分かりになる方教えていただけますか?

みんなの回答

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.5

>2000文字を超える 問題が再現する最小構成(関係なさそうな部分を削除)で掲載できませんか?

chisalin
質問者

補足

すみません。最小構成にしました。 問題のずれる個所は「menu」です。 <style type="text/css"> /* ------ menu ------ */ body,td,th { font-size: 12px; line-height: 120%; color: #333333; } body { margin-left: auto; margin-top: 0px; margin-right: auto; margin-bottom: 0px; width: 750px; background-image: url(../image/bg.gif); } #maincontent #menu .h{ margin: 8px 5px 5px; background-color: #ffffff; padding: 10px 5px 5px; } #maincontent #menu .h ul{ } #maincontent #menu .h ul li{ background-image: url(../image/li01.gif); background-repeat: no-repeat; margin-top: 2px; margin-bottom: 2px; margin-left: 5px; padding-bottom: 3px; padding-left: 8px; background-position: 2px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #999999; padding-right: 5px; } #maincontent #menu table.menu{ padding: 0px; margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; } #maincontent #menu table.menu td.content{ background-attachment: fixed; background-image: url(../content/image/content_a.gif); background-repeat: no-repeat; padding: 2px 2px 2px 15px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; background-position: 1px 3px; } /* ------ maincontent ------ */ #maincontent{ background-image: url(../image/bgscrool.gif); height: 100%; background-repeat: repeat-y; width: 750px; margin-top: 0px; margin-right: 5px; margin-bottom: 5px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 10px; } #topicpath{ margin:0 1px 8 5px; padding:0px 8px 8px 10px; text-align:left; font-size:12px; } #maincontent #menu{ width:165px; float:left; padding: 0px; height: 100%; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 5px; } #maincontent #mainarea{ width:550px; float:left; line-height:1.5; margin: 0px; padding: 0px;} /* ------ clearfix ------ */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ <!-- --> </style> </head> <body> <div id="maincontent"> <!-- menu --> <div id="menu"><img src="../content/image/contents.gif" width="165" height="60" border="0"> <table class="menu"> <tr> <td class="content">今すぐお申込み</td> </tr> <tr> <td class="content">ホームページ作成</td> </tr> <tr> <td class="content">プロブラム連動サービス</td> </tr> <tr> <td class="content">ASPサービス</td> </tr> </table> </div> <!-- main --> <div id="mainarea"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-left:8px;"> <tr> <td><img src="../content/image/content_top.jpg" width="555" height="58"></td> </tr> </table> <table width="555" border="0" cellpadding="0" cellspacing="0" style="margin-left:8px; margin-top:15px; margin-bottom:10px;"> <tr> <td> <br> <br> <br> <br> <br> <br> <br> <br> <br></td> </tr> </table> </div> <div class="clearfix"></div> <!-- main end--> </div>

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.4

#3の例文、ちょっと間違ってました。(条件式がIE 5.xになってました) <!--[if IE 5]> ↓ <!--[if IE]>

chisalin
質問者

補足

すみません。さききほどの続きです。 /* ------ menu ------ */ #maincontent #menu .h{ margin: 8px 5px 5px; background-color: #ffffff; padding: 10px 5px 5px; } #maincontent #menu .h ul{ } #maincontent #menu .h ul li{ background-image: url(../../image/li01.gif); background-repeat: no-repeat; margin-top: 2px; margin-bottom: 2px; margin-left: 5px; padding-bottom: 3px; padding-left: 8px; background-position: 2px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #999999; padding-right: 5px; } #maincontent #menu table.menu{ padding: 0px; margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; } #maincontent #menu table.menu td.content{ background-attachment: fixed; background-image: url(../../content/image/content_a.gif); background-repeat: no-repeat; padding: 2px 2px 2px 15px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; background-position: 1px 3px; } /* ------ maincontent ------ */ #maincontent{ background-image: url(../../image/bgscrool.gif); height: 100%; background-repeat: repeat-y; width: 750px; margin-top: 0px; margin-right: 5px; margin-bottom: 5px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 10px; } #topicpath{ margin:0 1px 8 5px; padding:0px 8px 8px 10px; text-align:left; font-size:12px; } #maincontent #menu{ width:165px; float:left; padding: 0px; height: 100%; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 5px; } #maincontent #mainarea{ width:550px; float:left; line-height:1.5; margin: 0px; padding: 0px; } #maincontent #mainarea .section{ margin: 0px 0px 20px; padding: 0px 10px 0px 20px; } #maincontent h2{ margin-bottom: 10px; padding-left: 12px; margin-top: 0px; font-size: 14px; background-image: url(../../image/bg_h2.jpg); height: 26px; padding-top: 5px; background-repeat: no-repeat; } #maincontent h3{ margin-top: 15px; margin-right: 20px; margin-left: 15px; padding-left: 8px; border-bottom-width: 1px; border-left-width: 5px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #CCCCCC; border-left-color: #CCCCCC; font-size: 12px; } htmlのタグをいれると2000文字超えて投稿できませんでした。 どうしましょう。。。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.3

#2です。 margin、paddinあたりの解釈のバグが考えられます。 http://members.at.infoseek.co.jp/cssbug/detail/winie/b001.html 他、色々… 5pxのズレが再現するhtml+cssを補足してもらえば、具体的な対処方法とかもわかるかもしれません。 二種類書き分けて解決するなら、IE用に別のスタイルを追加するって方法もありますけど。 例) ・・・略・・・ xxx{margin-left:10px;} </style> <!--[if IE 5]> <style type="text/css"> xxx{margin-left:5px;}/*IEの場合だけmargin-leftを小さく*/ <![endif]--> http://www.keynavi.net/ja/bugh/comments.html

chisalin
質問者

補足

steel_grayさん、ありがとうございます。 以下、cssです。 ------------------------------- /* base */ body,td,th { font-size: 12px; line-height: 120%; color: #333333; } body { margin-left: auto; margin-top: 0px; margin-right: auto; margin-bottom: 0px; width: 750px; background-image: url(../../image/bg.gif); } #base{ background-image: url(../../image/main_bg.gif); width: 770px; } #header, #content, #footer{ width:750px; margin:0 auto; padding:0; text-algin:left; } * html body #content{ text-align: left; } .clear{ clear: both; display: block; margin: -1px 0 0; font-size: 1px !important; line-height: 0 !important; height: 1px; } /* ------ header ------ */ #header{ border-top-width: 15px; border-top-style: solid; border-top-color: #000051; padding-top: 15px; } #header #siteID{ width:380px; float:left; margin-right: 0; margin-bottom: 10; margin-left: 5px; } #header #siteID img{ float:left; } #header .menu{ float:right; margin-bottom: 3px; margin-top: 5px; margin-right: 5px; } #header #nav{ margin: 0px; padding: 0px; width:750px; vertical-align: top; } #header #search{ margin: 0px; float: right; } /* ------ content ------ */ #content{ margin:5px auto; padding: 0px; } #content #topicpath{ margin:6 1px 8 5px; padding:3px 8px 8px 10px; text-align:left; font-size:12px; } /* ------ top mainArea ------ */ #content #main{ width:370px; float:left; line-height:1.5; margin: 0px; padding: 0px; } #content #main .section{ padding-bottom:5px; padding-top: 10px; padding-right: 5px; padding-left: 5px; border-top-width: 3px; border-top-style: solid; border-top-color: #0041A5; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; } #content #l-menu{ width:175px; float:left; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 5px; margin: 0px; } #content #r-menu{ width:190px; float:right; background-image: url(../../image/r_bg.gif); vertical-align: middle; margin-right: 5px; padding-top: 10px; padding-bottom: 20px; margin-right: 5px; } #content .section{ padding-bottom:5px; padding-top: 0px; padding-right: 5px; padding-left: 5px; margin-right: 50px; margin-bottom: 5px; margin-left: 50px; margin-top: 0px; }

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

親ボックス(maincontent)に overflow:auto; を入れてみては。 overflow:visible以外ならなんでもいいんですが、 ブラウザによってバグなどで支障も出るので。一応autoで。 ↓詳しい事はこちらで。 http://www.geocities.jp/multi_column/float/05.html

chisalin
質問者

補足

steel_grayさん、ありがとうございます。 参考になるサイトをありがとうございました。 SAYKAさんの補足にも書きましたが、IEとFirefoxでの表示のズレで 悩んでいます。 5pxずれて表示されます。 どこを直せばいいのか…。

noname#39970
noname#39970
回答No.1

background-color:transparent を指定してみるとか

chisalin
質問者

補足

SAYKAさん、ありがとうございます。 「clearfix」を正しい位置に入れたら、画像が表示されるのに なりました。 ですが、IEとFirefoxでの微妙な表示差があって、Firefoxで表示が OKだとIEでずれる(5pxほど右にずれます)、IEにあわせるとFirefox が5px左にずれるという現象で悩んでます。 IEとFirefoxの表示のズレはなにが原因なのでしょう? 最初から設定しなおさないとダメなのでしょうか…。