Now granted I haven't done much HTML coding in a while but over the past two weeks I had to code 3 layouts for clients and hit the exact same problem in FF with each one.
You have a container div with a width and height on it, then inside that div you have another block level element, let's say an h1 tag and you apply margin-top to that h1. The second you do that the outer div moves down, applying the margin-top to it!
The first time it happened I thought I had applied the top margin to the wrong element but looking at the style sheet everything was fine. Being in a hurry I said screw it and applied margin-top to the h1 tag.
Fast forward through 2 other layouts and I keep running into the same problem. Using FF 4 BTW
It's called 'collapsing margins', and that's what's supposed to happen ... see http://reference.sitepoint.com/css/collapsingmargins for the lowdown on how it works.
This topic is now closed. New replies are no longer allowed.