Stylesheets - Margin Collapse problem in Opera and perhaps Foxfire

Author

Margin Collapse problem in Opera and perhaps Foxfire

boclair

2006-05-10, 7:09 am

I have been approached over a page that has a horizontal menubar
displaying over a banner. The problem advised that the menubar is not
displayed and the banner moves up to the position the menubar would
otherwise occupy. I don't see this in my version of Foxfire but I do
see it in my Opera browser.

A reduced demo is at http://www.boclair.com/margin-test/

I would think this is a collapsing margin problem. Declaring a nominal
height on the div containing the menubar appears to solve the problem on
my Opera.

Using the zoom property in lieu of height did not adjust the display in
Opera.

I could do with advise on this.

Louise

boclair

2006-05-10, 7:09 am

boclair wrote:
> I have been approached over a page that has a horizontal menubar
> displaying over a banner. The problem advised that the menubar is not
> displayed and the banner moves up to the position the menubar would
> otherwise occupy. I don't see this in my version of Foxfire but I do
> see it in my Opera browser.
>
> A reduced demo is at http://www.boclair.com/margin-test/
>
> I would think this is a collapsing margin problem. Declaring a nominal
> height on the div containing the menubar appears to solve the problem on
> my Opera.
>
> Using the zoom property in lieu of height did not adjust the display in
> Opera.
>
> I could do with advise on this.
>
> Louise

Rather than the height property, I have now used the padding property to
stop margins collapsing.

Louise

Neredbojias

2006-05-10, 6:49 pm

To further the education of mankind, boclair <boclair@bigpond.net.au>
vouchsafed:

> boclair wrote:
>
> Rather than the height property, I have now used the padding property
> to stop margins collapsing.
>
> Louise

I agree with your conclusion, -a collapsing margin problem. (Btw,
excellent demo/display of problem!) What I think happens/matches spec is
that the bottom margin of div.menu collapses into the top margin without
the padding or height declaration because all of the content is floated.
Whether the top-margin of the div below collapses, also, I dunno, but it
should be easy enough to tell from the dimensions.

--
Neredbojias
Infinity has its limits.

boclair

2006-05-10, 10:51 pm

Neredbojias wrote:
> To further the education of mankind, boclair <boclair@bigpond.net.au>
> vouchsafed:
>
>
> I agree with your conclusion, -a collapsing margin problem. (Btw,
> excellent demo/display of problem!) What I think happens/matches spec is
> that the bottom margin of div.menu collapses into the top margin without
> the padding or height declaration because all of the content is floated.
> Whether the top-margin of the div below collapses, also, I dunno, but it
> should be easy enough to tell from the dimensions.
>

Of course. I should have seen that.

The containing div doesn't have anything to give it in-flow content.
The links are all floated. Any in-flow content for the div containing
the menubar would do, padding, border, a non broken space , a dot etc

thanks Louise

Neredbojias

2006-05-10, 10:51 pm

To further the education of mankind, boclair <boclair@bigpond.net.au>
vouchsafed:

> The containing div doesn't have anything to give it in-flow content.
> The links are all floated. Any in-flow content for the div containing
> the menubar would do, padding, border, a non broken space , a dot etc
>
> thanks Louise

That's how I saw it, and 'welcome.

--
Neredbojias
Infinity has its limits.

boclair

2006-05-11, 3:58 am

Neredbojias wrote:
> To further the education of mankind, boclair <boclair@bigpond.net.au>
> vouchsafed:
>
>
> That's how I saw it, and 'welcome.
>

While not expecting consistent displays from the various browsers, the
differences caused me to rethink the margin collapse solution.

1.. The floated links in the menubar should have been cleared after the
containing menubar containing div.
2.. The clearing div should have content to meet the specs. This can be
a non broken space.
3.. The spacing between the menubar and the banner can be set by
declaring a font-size.

I have added another page using this method accessible from
http://www.boclair.com/margin-test/

Louise

Neredbojias

2006-05-11, 10:47 pm

To further the education of mankind, boclair <boclair@bigpond.net.au>
vouchsafed:

> While not expecting consistent displays from the various browsers, the
> differences caused me to rethink the margin collapse solution.
>
> 1.. The floated links in the menubar should have been cleared after the
> containing menubar containing div.
> 2.. The clearing div should have content to meet the specs. This can be
> a non broken space.
> 3.. The spacing between the menubar and the banner can be set by
> declaring a font-size.
>
> I have added another page using this method accessible from
> http://www.boclair.com/margin-test/

I can understand some reasons for margin-collapse, but was never
particularly a fan of it. Perhaps if it defaulted to "off" it would be
more proper.

--
Neredbojias
Infinity has its limits.