Margin Collapse problem in Opera and perhaps Foxfire

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 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 wrote:

To further the education of mankind, boclair <boclair (AT) bigpond (DOT) net.au
vouchsafed:

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

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 wrote:

To further the education of mankind, boclair <boclair (AT) bigpond (DOT) 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.

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