Closed Bug 371971 Opened 17 years ago Closed 17 years ago

CSS margin issue with firefox 1.0.4, 1.5 and 2

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Version:
1.8 Branch
Platform:
x86
Linux
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: matthewstory, Unassigned)

Details

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).

Reproducible: Always

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:

<html>
<head></head>
<body>
<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>
</div>
<script type="text/javascript" language="javascript">
        alert(document.getElementById("child").offsetLeft + '+' + document.getElementById("child").offsetTop);
</script>
</body>
</html>

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.
Actual Results:  
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).

Expected Results:  
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:

http://www.w3.org/TR/CSS2/box.html#margin-properties

"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.
Component: Help Documentation → Layout
Product: Firefox → Core
QA Contact: help.documentation → layout
Version: unspecified → 1.8 Branch
(In reply to comment #1)
> I just looked more into this:
> 
> http://www.w3.org/TR/CSS2/box.html#margin-properties

And CSS2.1 is possibly more clear
http://www.w3.org/TR/CSS21/box.html#propdef-margin

Gecko's behaviour is correct.
Status: UNCONFIRMED → RESOLVED
Closed: 17 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.