CSS margin issue with firefox 1.0.4, 1.5 and 2

RESOLVED INVALID

Status

()

Core
Layout
RESOLVED INVALID
11 years ago
11 years ago

People

(Reporter: Matthew Story, Unassigned)

Tracking

1.8 Branch
x86
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

11 years ago
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.
(Reporter)

Comment 1

11 years ago
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.

Updated

11 years ago
Component: Help Documentation → Layout
Product: Firefox → Core
QA Contact: help.documentation → layout
Version: unspecified → 1.8 Branch

Comment 2

11 years ago
(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
Last Resolved: 11 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.