- ベストアンサー
マージンの基点について
以下のような記述にてFirefox、Chromeですと"footer_contents"にマージンを指定しても うまく反映されません。 "footer"を基点としてマージンが適応されるものと考えておるのですが実際はその上の"maincontents_end"もしくは"header"の下部からマージンが適応されてしまっています。IE7ではこのようなことは起こりません。 どなたかご教授いただければ幸いです。 もし足りない情報がある場合、言っていただければ可能な限りお出しします。 ※sidebarとmaincontentsは特殊な枠を使いたいためこのような記述の仕方しています。ややセオリーに反した記述かとも思います。 <body> <div id="header"> <div id="topcontainer"></div> <div id="menu" ></div> <div id="container"> <div id="sidebar_top"> <div id="sidebar_contents"> </div> <div id="sidebar_end"></div> </div> <div id="maincontents_top"></div> <div id="maincontents"></div> <div id="maincontents_end"></div> <!-- end #container --></div> <!-- end #header --></div> <div id="footerbg"> <div id="footer"> <div id="footer_contents"> </div></div></div> <div id="endfooter"></div> </body>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
マージンの相殺が生じているのだと思います。詳細は下記などを参考にしてみて下さい。 【参考】http://adp.daa.jp/archives/000574.html 今回の場合だと、#footer_contentsのmargin-top: 85px;が、親（#footer）の親である#footerbgに遡って適用されている事になります。 どういう条件でその現象が起きるかという事も回避方法も上記で細かく検証されているので、そちらをご覧になればおわかりになると思いますが、子要素のボックスにmargin-topを指定するのではなく、親要素のボックスにpadding-topを指定できれば一番手っ取り早いです。ただ、デザイン上それが出来ない場合もあるかもしれません。 （CSSとHTMLのソースを見た感じだと、おそらく質問者様は主なコンテナブロックの上下に、背景にGIF画像を横方向にレンダリングして区切りラインの様なレイアウトを目指しておられるのですよね。フッター部分の画像の内、footerbg_2.pngとendfooterbg_1.pngはその様なライン的使い方だと思いますが、footerbg_2.pngとfooterbg_1.pngに関しては実際の画像がどういったもの（縦横サイズ）なのか想像できかねるので、それによって回避方法が異なってくる可能性もあるかも…） デザイン上、支障がないのであれば、#footer_contentsのmargin-top: 85px;を削除し、親の#footerにpadding-top: 85px;を与えれば良いことになります。 ただし、#footer_contentsにはheightが指定されているので、標準準拠モードの場合は、hegihtの値はpadding-top分を引いておかなかればなりません。 416px－85px＝331px、で、height: 331px;となります。 以下、その変更を加えたフッター部分のCSSです。backgroundやmarginプロパティは一括指定でまとめました。あと、不要（ディフォルト値など）と思われる指定も削除してあります。 --------------------------------------------------------------------- #footerbg { clear: both; margin: 0;←※左右マージンをautoにする必要なし background: url(footerbg_2.png) repeat-x #D5FCB5; } #footer { width: 760px; height: 331px; margin: 0 auto; background: url(footerbg_1.png) no-repeat; padding-top: 85px;←※追加 } #footer_contents { width: 754px; height: 174px; background: url(footercontents_1.png) no-repeat; margin: 0 auto;←※margin-topの値を0に } #footer_contents p { text-align: center; margin: 0; padding: 10px 30px; font-size: 75%; } #endfooter { height: 53px; margin: 0; background: url(endfooterbg_1.png) repeat-x #D5FCB5; } --------------------------------------------------------------------- ちなみに、上記の検証は、IE・Firefox等問わず標準準拠モードになるHTML4.01 Strictにて検証したものです。 IE6/7、Firefox2/3、Safari3、Opera9.61、Google Chrome1、にて同様の表示結果を得ております。 不具合や検証条件の違い等ありましたら補足して下さい。 ※ちなみに、背景画像をレンダリングするためだけの空のボックスを置くのはお奨めできません（何も内容がないマークアップになってしまうからです）。できればマークアップやCSSを工夫するなどして、内容のあるコンテナに背景画像を振り分ける様にした方が良いと思います。
その他の回答 (1)
- hirai2008
- ベストアンサー率56% (22/39)
IE7では意図したものが表示されるのに、 Firefox,Chromeでは意図したものと違う、ということですが、 正確には、CSSにおいてバグが多いのがIE側です。 多分、IE6で見たらもっとヒドイことになってるかもです…。 Firefoxに合わせて作って、IE各バージョンでのズレをCSSハックなどで修正する、という方法のが良いと思います。 前置きはさておき、本題の件ですが レイアウトボックスに、width、border、paddingを同時に指定していませんか？ IEはwidthの定義にバグがあるので、同時に指定しない方がいいです。 こちらのサイトが参考になると思います。 http://www.web-mame.net/css_layout/beginner3.html 結論だけを抜粋すると下記３つがポイント ・width と border, padding を同時指定しない ・width と margin は同時に指定しても大丈夫 ・width を指定しないのならば、 margin, padding, border を同時に指定しても大丈夫 他にもDOCTYPE スイッチでバグを抑えたり…って方法もありますが、 ややこしいので上記の方法で試してみてください。
お礼
わざわざご回答ありがとうございました。 IE6、IE7にFirefox（Chrome）とそれぞれCSSの動作が微妙に違っていてCSSって何なんだろ？って思うときがあります。 便利にするために使うものが私の質問もそうですが、逆に手間が掛かってしまったりしています。少なくともIE6はWindowsの強制アップデートとかでなくなってほしいです（^^；） ご紹介いただきましたWEB作成の豆知識参考にさせていただきます。 また質問させていただくときはよろしくお願いします。この度はどうもありがとうございました（^^）
補足
早速ご回答いただきましてありがとうございました。 ご紹介いただきましたHPにて勉強させていただきましてCSS調整してみようかと思います。 その前に後出しでスミマセンがCSSの方をお出しします。 もしこれで原因わかりましたらお教えいただけたらとありがたいです。 何卒、よろしくお願い致します。 #header { width: 760px; / text-align: center; background-image: url(background_top.png); background-repeat: repeat-x; margin: auto; padding: 0px; } #menu{ width: 760px; background-color: #D5FCB5; margin: 0 auto; } #container { width: 760px; text-align: center; } #sidebar_top { width: 120px; height: 10px; float: left; margin-top: 10px; background-image: url(sidebarbg_5.gif); background-repeat: no-repeat; background-color: #FFFFFF; } #sidebar_contents { width: 120px; float: left; margin-top: 10px; background-image: url(sidebarbg_6.gif); background-repeat: repeat-y; } #sidebar_end { width: 120px; height: 10px; float: left; background-image: url(sidebarbg_7.gif); background-repeat: no-repeat; } #maincontents_top { width: 620px; height: 10px; float: right; background-image: url(maincontentsbg_6.gif); background-repeat: no-repeat; margin-top: 10px; margin-right: 5px; margin-left: 5px; } #maincontents { width: 620px; float: right; background-image: url(maincontentsbg_5.gif); background-repeat: repeat-y; margin-right: 5px; margin-left: 5px; } #maincontents_end{ width: 620px; height: 10px; float: right; background-image: url(maincontentsbg_4.gif); margin-right: 5px; margin-left: 5px; } #footerbg { height: 416px; clear: both; margin: 0 auto; background-image: url(footerbg_2.png); background-color: #D5FCB5; background-repeat: repeat-x; } #footer { width: 760px; height: 416px; margin: 0 auto; background-image: url(footerbg_1.png); background-repeat: no-repeat; } #footer_contents { width: 754px; height: 174px; background-image: url(footercontents_1.png); background-repeat: no-repeat; margin-top: 85px; margin-right: auto; margin-left: auto; } #footer_contents p { margin: auto; text-align: center; padding: 10px 30px; font-size: 75%; } #endfooter { height: 53px; margin: 0 auto; background-image: url(endfooterbg_1.png); background-repeat: repeat-x; background-color: #D5FCB5; }
お礼
ありがとうございます！ 無事"footer_contents"が希望の位置に表示されるようになりました（^^） マージンの相殺については本でよく書かれてあるの記憶にありますがまさか自分のHPがそれに当たっていたとは露程もわかりませんでした（^^；） "footer"の背景画像の空ボックスはセオリーに反しているのは気付いているのですが自作の画像を使いたい場合良い方法がわからず強引にこういう方法取ってしまっています。ここは他の方のスタイルシートなど参考にして良い方法勉強したいと思います。 実はまたこことはまた別の場所で困ったところがありまして、もし解決出来ないときはOKwebで質問させていただこうかと考えております。 その時もよろしければアドバイスいただければと思います。 この度は動作確認などご丁寧にありがとうございました！