My bold.. "Combining Margins" might have been a better term :) When two margins "combine", the larger one wins the day!
In simple terms..
Moz is "combining" the <p> margin with it's parent (#content ) div's bottom margin, the <p> margin is larger and is "winning" then Moz is rendering the larger margin inside the parent.. (see inside your left div for proof of this)
IE/Opera is actually doing this too, but the crossbrowser difference comes from where the different browsers apply the combined margin. they are putting it outside the (cleared) #content div, so causing the gap between it and the footer.
The footer is immune because it has a top border on it.
Both your methods of "fixing" this, (avoiding the occurence, is more like it) are correct.
Personally, I set all internal elements that have default margins.. e.g. <hx>, <p>, <form> to O in the master CSS file and set any required spacing with padding.
Because the different Browsers deal with collapsing margins differently, it's more obvious in Moz, because of the gaps, in IE/Opera it's more likely to show itself when you can't apply a top/bottom margin to something..(like in the left div) IE/opera also have another big difference, becuase they render the margin on the parent, it then seems to go on collapsing if there are any more ascendants above.... yeuch..
It's because of these difference I find it easier just to use the solution that avoids it in all browsers. Until I understand this fully anyways ;)
Solution in this instance...
p {margin: 0; padding: 10px 0;}
or the border on the content div is another recommended one.. (top and/or bottom one will do)
Will explain more if I ever figure it out properly :)
Suzy
