unwanted margin betwen divs

[Brian]

I have a page with content, navigation, and footer divs, in that
order. The nav div has position: absolute, width 8em, on green
background. The other divs have an 8em green left border, such that
the nav sits on that border. There is a thin red top border on footer
for testing.

http://www.tsmchughs.com/test/

On that page, all is as expected. However, on the long page
http://www.tsmchughs.com/test/long
there is an unwanted space of what looks like 1em between the content
and footer divs. Reproducible on Mozilla 1.3, O7.23, and MSIE
5.01/Windows2k.

Stranger still, by adding a bottom border on content
http://www.tsmchughs.com/test/longwb
I can make the space (almost?) disappear on Moz/Opera, though it's
still there in MSIE.

CSS:
http://www.tsmchughs.com/test/test.css

Any idea what is going on?

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

[Lauri Raittila]

In article Brian wrote:

http://www.tsmchughs.com/test/

On that page, all is as expected. However, on the long page
http://www.tsmchughs.com/test/long
there is an unwanted space of what looks like 1em between the content
and footer divs. Reproducible on Mozilla 1.3, O7.23, and MSIE
5.01/Windows2k.
I see this space in both examples. It sounded like margin collapsing, and
it was margin collapsing.
Stranger still, by adding a bottom border on content
http://www.tsmchughs.com/test/longwb
I can make the space (almost?) disappear on Moz/Opera, though it's
still there in MSIE.
That means it certainly is about margin collapsing. Bottom margin of last
paragraph is collapsed with bottom margin of content div.

Solutions:
- add some padding-bottom or border-bottom to content div.
- remove margin from last paragraph
CSS:
http://www.tsmchughs.com/test/test.css

Thanks for clear testcase. Usually I need to hunt your CSS for ages ;-)

How to find what causes unwanted whitespace:
1. check if margins are collapsing
2. check whitespce in wrong places.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Brian]

Lauri Raittila wrote:

In article Brian wrote:

on the long page http://www.tsmchughs.com/test/long there is an
unwanted space of what looks like 1em between the content and
footer divs. Reproducible on Mozilla 1.3, O7.23, and MSIE
5.01/Windows2k.
I see this space in both examples. It sounded like margin
collapsing, and it was margin collapsing.

I didn't -- still don't, really -- know much about margin collapsing.
When I have time, I'll have to read up on it. I suppose it means that
a bottom margin on e.g. the last paragraph will become the
bottom-margin of a div with bottom-margin: 0. Not what I expected.
Solutions:
- add some padding-bottom or border-bottom to content div.
Works in Moz/Opera. Does not work in MSIE 5.01/Win.
- remove margin from last paragraph
I hate to have to add all that style info to my css. I'll need it for
lots of pages. I guess I'll have to decide how imporant this is.
Thanks for clear testcase. Usually I need to hunt your CSS for ages
;-)
:-) Sorry for being lazy in the past. It's true that a test case is
better. It takes significant work, but it's for me to do rather than
ciwas participants.
How to find what causes unwanted whitespace: 1. check if margins
are collapsing 2. check whitespce in wrong places.

Thanks a bunch. I would not have figured this out without some help.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

[Lauri Raittila]

In article Brian wrote:

Lauri Raittila wrote:

In article Brian wrote:

on the long page http://www.tsmchughs.com/test/long there is an
unwanted space of what looks like 1em between the content and
footer divs. Reproducible on Mozilla 1.3, O7.23, and MSIE
5.01/Windows2k.
I see this space in both examples. It sounded like margin
collapsing, and it was margin collapsing.

I didn't -- still don't, really -- know much about margin collapsing.
When I have time, I'll have to read up on it. I suppose it means that
a bottom margin on e.g. the last paragraph will become the
bottom-margin of a div with bottom-margin: 0. Not what I expected.

Solutions:
- add some padding-bottom or border-bottom to content div.

Works in Moz/Opera. Does not work in MSIE 5.01/Win.

I have no IE5.01, so I can't help. I past, I have used padding in P
instead of margin when making solid border around page. (I didn't wan't
to use wrapper div, as whole point of that example was not to need
wrapper div...)

The problem with using padding is that you luse advantages of margin
collapsing...

remove margin form last P I hate to have to add all that style info to my css. I'll need it for
lots of pages. I guess I'll have to decide how imporant this is.

Too bad CSS3 is not supported...
How to find what causes unwanted whitespace:
1. check if margins are collapsing
2. check whitespce in wrong places.

Thanks a bunch. I would not have figured this out without some help.

Tests:
1. * {margin:0;} or * {border:thin solid} -> whitespace goes away
-> it's margin collapsing
2. s/(\n|(>) | (<))/$2/g -> white space goes away -> it's white space bug
or something similar.
(I hope I did that correctly, I can't contact my unix shell to test at
moment)

Of course, neither is solution, but way to find out which one is the
problem, if either.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.