Important Notice: We're experiencing email notification issues. If you've posted a question in the community forums recently, please check your profile manually for responses while we're working to fix this.

On Monday the 3rd of March, around 5pm UTC (9am PT) users may experience a brief period of downtime while one of our underlying services is under maintenance.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Rohkem teavet

Teema arhiveeriti. Please ask a new question if you need help.

Firefox 4 element seems to gain top margin when only bottom margin is set.

  • 1 vastus
  • 14 on selline probleem
  • 3 views
  • Viimati vastas dponinski

greyish
greyish
more options

I've been working on blocking out a page layout, and after I upgraded to Firefox 4 I noticed that a central element containing 3 floating elements and a clearing div suddenly started gaining spacing where the top margin would be whenever the bottom margin was set. One can bypass the problem by either giving the clearing div a height somehow or by using padding instead, but I want to know if this is a bug or that I'm just missing something. This behavior is not duplicated in any other browser I've tried including IE6.

I have set up a demo at http://jacobanderson.us/projects/bugs/firefox4margintest.html - if you edit the bottom margin of the "body .page .content .keynote" element in Firefox 4 you'll see that the entire element gains spacing on both the bottom and top equally. The same effect can be triggered by adding a top margin to the "body .page .content .columns" element.

I've been working on blocking out a page layout, and after I upgraded to Firefox 4 I noticed that a central element containing 3 floating elements and a clearing div suddenly started gaining spacing where the top margin would be whenever the bottom margin was set. One can bypass the problem by either giving the clearing div a height somehow or by using padding instead, but I want to know if this is a bug or that I'm just missing something. This behavior is not duplicated in any other browser I've tried including IE6. I have set up a demo at http://jacobanderson.us/projects/bugs/firefox4margintest.html - if you edit the bottom margin of the "body .page .content .keynote" element in Firefox 4 you'll see that the entire element gains spacing on both the bottom and top equally. The same effect can be triggered by adding a top margin to the "body .page .content .columns" element.

All Replies (1)

dponinski
dponinski
more options

I seemed to have solved the issue with the margin on the top and bottom. Just float the header and footer left. You might need to clear left or right depending on your layout but that did the trick for me. Hope this helps.