Re: [css-d] simple margins question
Hi Michael, I am new to this listserve so please forgive me if I am off base. I have added a 3px yellow border to your containing div, and it appears to be positioned at 0 (top) of the body. am I missing something? I have looked at it in Firefox 5.0 and IE 6.0. However to center the containing div in IE you will need to center the text in the body element. Jamy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple margins question
From: [EMAIL PROTECTED] [EMAIL PROTECTED] Subject: Re: [css-d] simple margins question I am new to this listserve so please forgive me if I am off base. On the contrary, I appreciate your help! I have added a 3px yellow border to your containing div, and it appears to be positioned at 0 (top) of the body. am I missing something? Jamy I received quite a few helpful responses to my question, many of which recommended the same thing -- ie, adding either padding or a border to the containing div. I see that it works equally well in FF2 and IE6. Thanks, Jamy. All the best, Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple margins question
Hey Michael,
Give the html element above the p that u want padding:1px; or border:1px;
so its children dont 'punch through' their top margins (so more specifically
padding-top:1px; in your case).
Otherwise the margins collapse and larger of 2 wins.
(for a beginning the 1st few examples here explain it well)
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
(this is also very good)
http://www.complexspiral.com/publications/uncollapsing-margins/
Arian Hojat
On 7/28/07, Michael Leibson [EMAIL PROTECTED] wrote:
Hi;
I'm trying to position the content area of a p below the top outer edge of
its containing div, by giving the p a large margin. The div is horizontally
centered within the body, is flush with the top of the page, and has no
margins or padding. To my surprise, the resulting p ends up lowering the
div's own position -- lowering it on the page -- as though the body had a
margin (which it doesn't). The only logical explanation I can deduce is
that -- as the p has margins but the div doesn't -- this may be a case of
'collapsing margins', where the greater of the two adjacent margins is
used. But this seems so counter-intuitive, I can't believe it's the actual
cause.
What's happening here?
If this is a case of collapsing margins, what does one do to use a p's
margins to lower its content area?
Here are the styles, and markup:
body {margin: 0; }
div {width: 700px; margin-left: auto; margin-right: auto; height: 500px;
background-color: green; margin-top: 0; padding: 0;}
p {border-style: solid; border-color: red; margin: 10%;}
body
div
pthis is a paragraph/p
/div
/body
Any tips would be gratefully welcomed!
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk
email the boot with the All-new Yahoo! Mail at
http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple margins question
Michael Leibson wrote:
Hi;
I'm trying to position the content area of a p below the top outer edge of
its containing div, by
giving the p a large margin. The div is horizontally centered within the
body, is flush with the
top of the page, and has no margins or padding. To my surprise, the
resulting p ends up lowering
the div's own position -- lowering it on the page -- as though the body had
a margin (which it
doesn't). The only logical explanation I can deduce is that -- as the p has
margins but the div
doesn't -- this may be a case of 'collapsing margins', where the greater of
the two adjacent
margins is used. But this seems so counter-intuitive, I can't believe it's
the actual cause.
What's happening here?
If this is a case of collapsing margins, what does one do to use a p's
margins to lower its content
area?
Here are the styles, and markup:
body {margin: 0; }
div {width: 700px; margin-left: auto; margin-right: auto; height: 500px;
background-color: green;
margin-top: 0; padding: 0;}
p {border-style: solid; border-color: red; margin: 10%;}
body
div
divthis is a paragraph/div
/div
/body
Any tips would be gratefully welcomed!
- Michael
Hi Michael
Your logic is correct, it's a case of collapsing margins [1]. Have you checked
in IE though, you will see a difference, it will show how you first imagined,
with the margin inside the container, but only because your container has
haslayout with width: 700px. Please refer to [2] concerning the IE behavior
(check also in Firefox). The way around collapsing margins is to give the
container padding or a border (same color as background) and this will bring IE
and the good browsers sort of into line.
[1] http://www.w3.org/TR/CSS21/box.html#collapsing-margins
[2] http://css-class.com/test/iehaslayoutmargins.htm
Kind Regards, Alan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple margins question
I think id prefer padding, but borders are just as good.
Here is an example showing you a couple ways of doing same thing.
#example2 uses more emphasis on parent doing all the intial padding,
#example1 on the child (with 1px padding on parent to preven margins from
punching through).
Switch #example1 and #example2 on body tag, should look same.
Arian
!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;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titlecollapse test/title
style type=text/css
body#example1 { padding:0px; margin:0px; }
#example1 div {
width: 700px;
height: 499px;
margin: 0px auto;
background-color: green;
padding: 1px 0px 0px 0px;
/*
either or:
border-top: 1px solid green;
*/
}
#example1 .first {
background-color: blue;
margin-top: 19px;
}
#example1 p{
background-color: red;
margin: 10px;
}
body#example2 { padding:0px; margin:0px; }
#example2 div {
width: 700px;
height: 480px;
margin: 0px auto;
background-color: green;
padding: 20px 0px 0px 0px;
}
#example2 .first {
background-color: blue;
margin-top: 0px;
}
#example2 p{
background-color: red;
margin: 10px;
}
/style
/head
body id=example1
div
p class=firstthis is a paragraph/p
pthis is a paragraph/p
pthis is a paragraph/p
pthis is a paragraph/p
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple margins question
Message: 18 Date: Sat, 28 Jul 2007 13:30:03 -0700 From: Alan Gresley [EMAIL PROTECTED] Subject: Re: [css-d] simple margins question To: css-d@lists.css-discuss.org Message-ID: [EMAIL PROTECTED] Content-Type: TEXT/plain; CHARSET=US-ASCII Michael Leibson wrote: . . . If this is a case of collapsing margins, what does one do to use a p's margins to lower its content area? Hi Michael Your logic is correct, it's a case of collapsing margins [1]. Have you checked in IE though, you will see a difference, it will show how you first imagined, with the margin inside the container, but only because your container has haslayout with width: 700px. Please refer to [2] concerning the IE behavior (check also in Firefox). The way around collapsing margins is to give the container padding or a border (same color as background) and this will bring IE and the good browsers sort of into line. [1] http://www.w3.org/TR/CSS21/box.html#collapsing-margins [2] http://css-class.com/test/iehaslayoutmargins.htm Kind Regards, Alan Thanks for this detailed reply, Alan -- I appreciate it. I had noticed that IE looked okay, but I am getting used to expecting completely unpredictable differences between browsers (argh!).I had also stumbled on the CSS2.1 specifications on collapsing margins. I know the minds behind CSS 2.1 had many things in mind when they designed this, but . . . I had come across other articles on 'hasLayout' in IE, but I have to confess that, as I am a complete beginner at all this, it was way beyond me. So too, unfortunately, was this particular URL -- for some reason, ALL the examples displayed with the same amount of padding, etc, and so I couldn't trace the effects the author describes. All the best, Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
