717880 - css interpretation bug: margin-bottom value of parent with child flow-element becomes padding-top value

Status: RESOLVED DUPLICATE of bug 451791

(Firefox :: Untriaged, defect)

Description

[zibmacx]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:9.0.1) Gecko/20100101 Firefox/9.0.1
Build ID: 20111220165912

Steps to reproduce:

I created a website with a template where the content should be centered in x and its child be positioned in a certain y-position. An inner child got a FLOAT:RIGHT and its parent should produce a y-scrollbar if the window gets too small and therefore got a MARGIN-BOTTOM.
Element order was:
div (absolute text-align center w100%)
  div (relative text-align center w1000px)
    div (relative text-align left w100% MARGIN-BOTTOM:50px)
       div (FLOAT:RIGHT)


Actual results:

Some pages using this template had been correct, but most not. It turned out that there is a strange interaction behavior if specific css-styles are combined which can lead to a wrong y-position because a margin-bottom value seems  to be interpreted as a padding-top value.

The strange is, that this error suddenly disappears if you add for instance a border style to specific other element on the page, while for instance adding a background-color has not such an effect.

I checked this on Firefox 9 Mac and Fireforx 5 Mac with same effect. 
No Problem in Safari and Chrome.



See the attached file and try out the instructions in the comments:
The blue line is the desired y-positon. The green field should match this line at its top but does not. The red areas are the floating child-elements.

OK, now the magic. It gets to the rigth y-position if you now add for instance a border to one of the parents or to following elements.ct.


Expected results:

All pages using this template should have been in the same y-position.

margin-top should never be interpreted as padding-top.

Comment 1

[zibmacx]

Attachment: Attachment for MarginTop to PaddingTop bug

Sorry accidently hit the wrong button when I wanted to attach the html example file. So here it is...

Comment 2

[zibmacx]

Sorry had some writing errors....

Its not Margin-Top to Padding-Top BUT Margin-Bottom to Padding-Top of course !!!

(editing option on this page would be helpful)

Comment 3

[philippe (part-time)]

(In reply to zibmacx from comment #2)

> Its not Margin-Top to Padding-Top BUT Margin-Bottom to Padding-Top of course

It is a actually a margin-top…
This is a know issue. Thanks for reporting, though.