oveflow、margin等の表示について質問です

2008/08/27 14:24

このQ&Aのポイント

overflow: hidden を指定すると、目的通りに表示されることがわかりました。
containerのmargin-topを指定せず、wrapperにpadding-top:35pxを指定する方法でも目的通りに表示されました。
個人的な感覚ではcontainerのmarginをいかす方法で進めたいですが、何故oveflowで解決できたのかがわかりません。

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; }

rock_nagi
お礼率100% (2/2)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#66720

2008/08/27 20:41 回答No.1

試しにFirefox2と3で見てみましたが、特に問題はなかったです。なぜでしょう・・・上のソースでまだ再現できますか？

質問者

お礼 2008/08/28 10:58

metametamu様ご回答ありがとうございます。当方Firefox3では未確認なのですが、firefox2で上記のcssですと、やはり背景の表示に問題が出てしまいます。#wrapperにoverflowを追記するだけで解決はするのですが…。ちなみに、css側に「@charset "UTF-8"」を記述しています。 htmlのhead内は以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Test</title> <link href="../css/***1.css" rel="stylesheet" type="text/css" /> <link href="css/***2.css" rel="stylesheet" type="text/css" />

その他の回答 (1)

include_ab
ベストアンサー率60% (35/58)

2008/09/01 09:02 回答No.2

ちょっと確認がとれていないので、間違っているかもしれませんが。多分、マージンの相殺の為だと思われます。親要素(#wrapper)と子要素(#container)でもマージンの相殺が起こります。これは、垂直方向だけに適応されます。また、相殺が発生する条件は、・float、positionの指定がない。・親要素に縦方向のborder、paddingが指定されていない。という場合だったと思います。つまり、親要素のmargin:0と子要素のmargin:35pxが相殺され、あたかも親要素にmarginがあるかのような"見た目"になります。 overflowに関しては、もうおわかりと思いますが、子要素のmarginが親要素から飛び出るのでその分が処理されているのだと思います。ちょっとあやふやなので、詳しくはW3Cの仕様書などで調べてみて下さい。

質問者