User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.10) Gecko/20050925 Firefox/1.0.4 (Debian package 1.0.4-2sarge5)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.10) Gecko/20050925 Firefox/1.0.4 (Debian package 1.0.4-2sarge5)
All margins are set based solely on the width of an element, not based on the height (if it needs to be), when margins are set using '%'. This is equally problematic wether the margin is set with margin:, or it is set with margin-left, top, right and bottom uniquely. I have reproduced this on firefox 1.0.4 for linux 1.5 for linux (don't have the exact build id) and firefox 2, build ID (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0).
Steps to Reproduce:
1. Create an HTML file and a script to alert you to the offsetLeft and offsetTop of an element: this is the one I used:
<div id="parent" style="height:100px; width:500px; border:1px solid black;">
<div id="child" style="height:50px; width:50px; border:1px solid black; margin-left:10%; margin-top:10%;"></div>
alert(document.getElementById("child").offsetLeft + '+' + document.getElementById("child").offsetTop);
2. Browse to the file with firefox, upon opening the page an alert will let you know what the offsetLeft and offsetTop of the child div is.
With a parent element with a width of 500px and a height of 100px, and a child element with a margin-left of 10% and a margin top of 10% or a margin of 10%, the offsetLeft will be 59px and the offsetTop will be 59px. This data can be verified by looking at the page as well, clearly the element has equal margins on both the top and left. (so it's not a problem with offsetTop or offsetLeft).
With those dimensions I expected an offsetTop of 19px and an offsetLeft of 59px, with 10px (10% of 100px) padding top and 50px (10% of 500px) margins, 8px offset for the parent and 1px of parent border. Essentially I expected the top margin (when a percentage) to be calculated off the height of the parent element, and the left margin to be calculated off the width of the parent element, not for both to be calculated off the parent element's width.
I just looked more into this:
"The percentage is calculated with respect to the width of the generated box's containing block. This is true for 'margin-top' and 'margin-bottom', except in the page context, where percentages refer to page box height."
I guess that's the way it's supposed to be . . . (looked at IE7 as well, and it's the same with them). Appologies for the bug report about a non-bug. I still think this is foolish . . . guess I should take that up with the W3C.
(In reply to comment #1)
> I just looked more into this:
And CSS2.1 is possibly more clear
Gecko's behaviour is correct.