468,257 Members | 1,418 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,257 developers. It's quick & easy.

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
May 10 '06 #1
6 2163
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
May 10 '06 #2
To further the education of mankind, boclair <bo*****@bigpond.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.

--
Neredbojias
Infinity has its limits.
May 10 '06 #3
Neredbojias wrote:
To further the education of mankind, boclair <bo*****@bigpond.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
May 10 '06 #4
To further the education of mankind, boclair <bo*****@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.
May 11 '06 #5
Neredbojias wrote:
To further the education of mankind, boclair <bo*****@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.


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
May 11 '06 #6
To further the education of mankind, boclair <bo*****@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.
May 12 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Jukka K. Korpela | last post: by
5 posts views Thread by Mike Irwin | last post: by
12 posts views Thread by Andrew Thompson | last post: by
19 posts views Thread by Thomas Mlynarczyk | last post: by
1 post views Thread by jason.m.ho | last post: by
reply views Thread by kermitthefrogpy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.