CSS not doing what I expect - why?

Hi all,

If you look at these two pages..

http://homepage.ntlworld.com/ian.hobson/example/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

Ian Hobson wrote:

Hi all,

If you look at these two pages..

http://homepage.ntlworld.com/ian.hobson/example/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 wrote:

Ian Hobson wrote:
Hi all,
If you look at these two pages..

http://homepage.ntlworld.com/ian.hobson/example/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).

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.

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

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.

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#collapsing-margins>
<http://www.w3.org/TR/CSS21/box.html#mpb-examples>

--
Gus

On 2008-08-11, Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> wrote:

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.