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/
