margin-top Firefox BUG
I have a problem with nested divs and using margin-top. I am hoping somebody could help me find a solution. I made a really simple example of what I am trying to do. Here is the link:
In IE, the top margin is properly applied to the red div to distance it from the top of the blue div. However, in Firefox, the top margin of the red div is applied to the blue div (it's parent element). Does anybody know what I could do? Your help would be so much appreciated.
Different doctypes did not help the matter.
Here is the code:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
thanks so much,
Collapsing margins: add 1px of top padding to #blue. Also, remove height: auto - it's already auto height so you don't need to specify it.
Firefox is in fact obeying the specs in this matter and you can read more about the effect here:
The solution Tyssen posted should sort it anyway