Style "display: -moz-box;" seems to ignore padding values for inner boxes

NEW
Unassigned

Status

()

Core
Layout
--
minor
8 years ago
5 years ago

People

(Reporter: Simon, Unassigned)

Tracking

11 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments)

(Reporter)

Description

8 years ago
User-Agent:       Mozilla/5.0 (Windows NT 5.1; rv:2.0b11) Gecko/20100101 Firefox/4.0b11
Build Identifier: Mozilla/5.0 (Windows NT 5.1; rv:2.0b11) Gecko/20100101 Firefox/4.0b11

When using a <div>-element with "display: -moz-box;" the padding value of 10px for the inner box seems to be ignored. Once I remove the "display: -moz-box;" setting the box is rendered correctly. The behavior does not occure in Google Chrome. Please also see the attached screenshots and test cases.

Reproducible: Always

Steps to Reproduce:
1. View the test files in Firefox
2. The width of the blue boxes should be the same in both files
Actual Results:  
As soon as "display: -moz-box;" is assigned to the outer <div>-element, the padding value is ignored and the blue box is 20px smaller.

Expected Results:  
Width of the blue box should be the same in all cases.

Setting any valid value for "-moz-box-sizing" does not seem to change anyting.
(Reporter)

Comment 1

8 years ago
Created attachment 513969 [details]
Demonstration screenshot of the issue
(Reporter)

Comment 2

8 years ago
Created attachment 513970 [details]
Test case that shows the bug
(Reporter)

Comment 3

8 years ago
Created attachment 513971 [details]
Test case that shows how it is expected to work
(Reporter)

Comment 4

8 years ago
Created attachment 513977 [details]
Another test case using "display: -moz-box;" and "float: right;"

It turns out that there seem to be some more bugs related to the flex-box-model and float-boxes. Please see the new test case "float.html" which also shows an odd behavior.
(Reporter)

Comment 5

8 years ago
Created attachment 513978 [details]
Screenshot showing the results of the second textcase

Updated

8 years ago
Version: unspecified → Trunk
Ok. I think this is a Layout problem, but I'm not sure, so if you think otherwise please change the Component.
Status: UNCONFIRMED → NEW
Component: General → Layout
Ever confirmed: true
Product: Firefox → Core
QA Contact: general → layout
(Reporter)

Updated

7 years ago
OS: Windows XP → All
Hardware: x86 → All
Version: Trunk → 5 Branch
(Reporter)

Comment 7

7 years ago
This bug has been around for some time now. Since the flexible box model is already supported by webkit and will come to the next iteration of the internet explorer it would be nice if this bug gets fixed soon so we can conveniently use this new layout feature across all these browsers.
(Reporter)

Updated

7 years ago
Version: 5 Branch → 6 Branch
(Reporter)

Updated

7 years ago
Severity: normal → critical
Priority: -- → P1
(Reporter)

Comment 8

6 years ago
A new Firefox version comes out every 6 weeks and this is still not fixed!?!
Version: 6 Branch → 11 Branch
Firefox 20 (expected release 2013-04-01) will have CSS3 flex box support by default.
http://www.mozilla.org/en-US/firefox/beta/
https://developer.mozilla.org/en-US/docs/Firefox_20_for_developers
http://www.w3.org/TR/css3-flexbox/

Making improvements and fixing bugs in "display:-moz-box" layout is low priority
and it will likely be deprecated some time in the future.
Severity: critical → minor
Priority: P1 → --
You need to log in before you can comment on or make changes to this bug.