Top-margin FF problem

HTML & CSS
1

I’m having a problem with top-margin in FF…

I’m familiar with this problem, you’re supposed to give padding-top to containing element otherwise FF won’t respect top margin (people say that well, actually FF is correct here, I don’t see how, this is extremely annoying…)

however: what if my element is not at the top of a containing element, but simply follows an other element in the containing div? to which I cannot give a bottom-margin? – it’s a ul – but I can’t give it a bottom-mgn because then it would give all other ul’s above the last ul a bottom-mgn also… so then I would have to give that lastul a bottom-mgn (not very practical for dynamic content…) so then I could wrap all ul’s in a wrapper div and give that wrapper div a bottom margin, and that other thing a margin only for the bottom… ) this for an hr, but I had to chg the hr to a div I styled like an hr b/c IE has problems with hr top & bottom margins…

man… I do get so sick of this cross-browser stuff sometimes; most problems I’m able to solve fine, but every once in a while I come across something really annoying…

so: is there any way I can get FF to respect top-margin here???

thank you…

2

thank you everyone for your responses… this is a weird problem… I fixed my issue, I can’t reproduce the problem anymore!!! :wink: it’s working fine now (top elem. has mgn-btm of 0, following elem has mgn-top of 20px… and it’s working as expected… )

at any rate, margin-collapse deals with when you have an element with margin-bottom, followed by an element with margin-top; in my case top element had margin 0, and it was still causing the problem… (I had known previously about margin-collapse when you have an element with bottom-mgn followed by an element with top-mgn… in fact I first read about it in a Sitepoint CSS book…:wink:

3

It’s not just adjacent margins, but also a first-child box with a top margin inside a container with no margins… the margin gets transferred to the container, instead of what you expected (space between top of container and top of first-child box).

4

It’s possible that what you are experiencing is a margin collapse. Though without a link to test, it’s impossible to know for sure :).

5

Hi,
It sounds like you have run into collapsing margins.
Can you post a link to the page or post an example of the code you need help with?

6

This article by Paul has saved my bacon more than once:

though it has a sister article mentioning IE specifically which is also worth reading (not like we never have floats, margins, clearing and IE together lawlz): http://www.search-this.com/2007/09/05/lets-be-clear-about-this/

…and what the heck, this one too: http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/

I personally still dislike it (margin collapse) but, bleh. It at least follows rules.