- 締切済み
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」を入れる場所もおかしいのかも知れないです。 お分かりになる方教えていただけますか？
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- steel_gray
- ベストアンサー率66% (1052/1578)
- steel_gray
- ベストアンサー率66% (1052/1578)
#3の例文、ちょっと間違ってました。（条件式がIE 5.xになってました） <!--[if IE 5]> ↓ <!--[if IE]>
補足
すみません。さききほどの続きです。 /* ------ 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)
#2です。 margin、paddinあたりの解釈のバグが考えられます。 http://members.at.infoseek.co.jp/cssbug/detail/winie/b001.html 他、色々… 5pxのズレが再現するhtml+cssを補足してもらえば、具体的な対処方法とかもわかるかもしれません。 二種類書き分けて解決するなら、IE用に別のスタイルを追加するって方法もありますけど。 例） ・・・略・・・ ｘｘｘ{margin-left:10px;} </style> <!--[if IE 5]> <style type="text/css"> ｘｘｘ{margin-left:5px;}/*IEの場合だけmargin-leftを小さく*/ <![endif]--> http://www.keynavi.net/ja/bugh/comments.html
補足
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)
親ボックス（maincontent）に overflow:auto; を入れてみては。 overflow:visible以外ならなんでもいいんですが、 ブラウザによってバグなどで支障も出るので。一応autoで。 ↓詳しい事はこちらで。 http://www.geocities.jp/multi_column/float/05.html
補足
steel_grayさん、ありがとうございます。 参考になるサイトをありがとうございました。 SAYKAさんの補足にも書きましたが、IEとFirefoxでの表示のズレで 悩んでいます。 5pxずれて表示されます。 どこを直せばいいのか…。
background-color:transparent を指定してみるとか
補足
SAYKAさん、ありがとうございます。 「clearfix」を正しい位置に入れたら、画像が表示されるのに なりました。 ですが、IEとFirefoxでの微妙な表示差があって、Firefoxで表示が ＯＫだとIEでずれる（5pxほど右にずれます）、IEにあわせるとFirefox が5px左にずれるという現象で悩んでます。 IEとFirefoxの表示のズレはなにが原因なのでしょう？ 最初から設定しなおさないとダメなのでしょうか…。
補足
すみません。最小構成にしました。 問題のずれる個所は「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>