CSS not doing what I expect - why?

[Ian Hobson]

Hi all,

If you look at these two pages..

http://homepage.ntlworld.com/ian.hob...mple/ex4a.html and

http://homepage.ntlworld.com/ian.hobson/example/ex4b.html

The only difference is that on ex4a.html the #main has a 1px border top
and bottom.

Can some kind person please explain to me why, when this is removed, the
white bands appear as in ex4b.html?

Other testing has shown that if I kill the top and bottom margins on
#main p, this will also fix the problem, but makes the layout of the
#main text look terrible. This would imply that it is something to do
with the margins on the P "sticking out" of the div, and pushing the
header and footer away. Should they do that?

Safari, Firefox 2 and 3, and Opera all handle the page the same way, so I
rather doubt this is a bug.

Thanks for your input.

Ian

[Harlan Messinger]

Re: CSS not doing what I expect - why?

Ian Hobson wrote:

Hi all,
>
If you look at these two pages..
>
http://homepage.ntlworld.com/ian.hob...mple/ex4a.html and
>

http://homepage.ntlworld.com/ian.hobson/example/ex4b.html

>
The only difference is that on ex4a.html the #main has a 1px border top
and bottom.
>
Can some kind person please explain to me why, when this is removed, the
white bands appear as in ex4b.html?

Because the first paragraph inside it has a top margin and the last
paragraph has a bottom margin, from line 26 in reset.css.

>
Other testing has shown that if I kill the top and bottom margins on
#main p, this will also fix the problem, but makes the layout of the
#main text look terrible. This would imply that it is something to do
with the margins on the P "sticking out" of the div, and pushing the
header and footer away. Should they do that?

Yes, so if the first paragraph shouldn't have a top margin and the last
paragraph shouldn't have a bottom margin, you should set them so, either
by assigning each of them a class or by using the pseudo-classes
:first-child and :last-child. The latter would be the better choice if
not for the fact that even version 7 of IE doesn't recognize last-child
(though it does recognize first-child).

[Harlan Messinger]

Actually: Re: CSS not doing what I expect - why?

Harlan Messinger wrote:

Ian Hobson wrote:

>Hi all,
>If you look at these two pages..
>>
>http://homepage.ntlworld.com/ian.hob...mple/ex4a.html and
>>
>http://homepage.ntlworld.com/ian.hob...mple/ex4b.html
>>
>The only difference is that on ex4a.html the #main has a 1px border
>top and bottom.
>Can some kind person please explain to me why, when this is removed,
>the white bands appear as in ex4b.html?

>
Because the first paragraph inside it has a top margin and the last
paragraph has a bottom margin, from line 26 in reset.css.
>

>>
>Other testing has shown that if I kill the top and bottom margins on
>#main p, this will also fix the problem, but makes the layout of the
>#main text look terrible. This would imply that it is something to do
>with the margins on the P "sticking out" of the div, and pushing the
>header and footer away. Should they do that?

>
Yes, so if the first paragraph shouldn't have a top margin and the last
paragraph shouldn't have a bottom margin, you should set them so, either
by assigning each of them a class or by using the pseudo-classes
:first-child and :last-child. The latter would be the better choice if
not for the fact that even version 7 of IE doesn't recognize last-child
(though it does recognize first-child).
>

Actually, you can also fix the appearance by giving div#main the same
top and bottom padding of 0.3em so that the first and last paragraph's
outer vertical margins will be absorbed within the main div and not
stick out as they do now.

[Ian Hobson]

Re: Actually: Re: CSS not doing what I expect - why?

On Mon, 11 Aug 2008 14:06:14 -0400, Harlan Messinger wrote:

Harlan Messinger wrote:

[snip]

Actually, you can also fix the appearance by giving div#main the same
top and bottom padding of 0.3em so that the first and last paragraph's
outer vertical margins will be absorbed within the main div and not
stick out as they do now.

Thanks Harlan,

I like that solution. It fits with the careful work getting H1 to H4 to
fit in properly also.

Will have to re-read up about margins and padding.

Thanks again.

Ian

[Harlan Messinger]

Re: Actually: Re: CSS not doing what I expect - why?

Ian Hobson wrote:

On Mon, 11 Aug 2008 14:06:14 -0400, Harlan Messinger wrote:
>

>Harlan Messinger wrote:

[snip]

>Actually, you can also fix the appearance by giving div#main the same
>top and bottom padding of 0.3em so that the first and last paragraph's
>outer vertical margins will be absorbed within the main div and not
>stick out as they do now.

>
Thanks Harlan,
>
I like that solution. It fits with the careful work getting H1 to H4 to
fit in properly also.
>
Will have to re-read up about margins and padding.
>
Thanks again.

You're welcome. Also, I forgot to mention one other thing: IIRC, a
border on a block box prevents a margin from one of its children from
stretching beyond it. So when you had a border, it constrained the
paragraphs' margins. That's why the problem only occurred when you
removed the border.

In fact, a hack you can use is to set a 1px border in the same color as
the background.

[Gus Richter]

Re: Actually: Re: CSS not doing what I expect - why?

Ian Hobson wrote:

On Mon, 11 Aug 2008 14:06:14 -0400, Harlan Messinger wrote:
>

>Harlan Messinger wrote:

[snip]

>Actually, you can also fix the appearance by giving div#main the same
>top and bottom padding of 0.3em so that the first and last paragraph's
>outer vertical margins will be absorbed within the main div and not
>stick out as they do now.

>
Thanks Harlan,
>
I like that solution. It fits with the careful work getting H1 to H4 to
fit in properly also.
>
Will have to re-read up about margins and padding.

Also read in the Specifications regarding "collapsing margins" because
that is the reason for what you have encountered:

<http://www.w3.org/TR/CSS21/box.html#collap sing-margins>
<http://www.w3.org/TR/CSS21/box.html#mpb-examples>

--
Gus

[Ben C]

Re: Actually: Re: CSS not doing what I expect - why?

On 2008-08-11, Harlan Messinger <hmessinger.rem ovethis@comcast .netwrote:

Ian Hobson wrote:

>On Mon, 11 Aug 2008 14:06:14 -0400, Harlan Messinger wrote:
>>

>>Harlan Messinger wrote:

>[snip]

>>Actually, you can also fix the appearance by giving div#main the same
>>top and bottom padding of 0.3em so that the first and last paragraph's
>>outer vertical margins will be absorbed within the main div and not
>>stick out as they do now.

>>
>Thanks Harlan,
>>
>I like that solution. It fits with the careful work getting H1 to H4 to
>fit in properly also.
>>
>Will have to re-read up about margins and padding.
>>
>Thanks again.

>
You're welcome. Also, I forgot to mention one other thing: IIRC, a
border on a block box prevents a margin from one of its children from
stretching beyond it.

Yes, that's right. Margins don't collapse "across" borders is the way
the spec explains this.

So when you had a border, it constrained the
paragraphs' margins. That's why the problem only occurred when you
removed the border.
>
In fact, a hack you can use is to set a 1px border in the same color as
the background.

Or just 1px padding, which is then automatically the right colour, and
will also get any background image rendered on top of it in the expected
way.