div with "display: table-cell" renders incorrect width when padding is used, also width is incorrect if no padding and got border

RESOLVED FIXED

Status

()

--
major
RESOLVED FIXED
9 years ago
4 years ago

People

(Reporter: ninzya, Unassigned)

Tracking

1.9.1 Branch
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

477 bytes, text/html
Details
(Reporter)

Description

9 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.0.11) Gecko/2009060215 Firefox/3.0.11
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.0.11) Gecko/2009060215 Firefox/3.0.11

Seems FF fails to properly calculate width of div, assuming padding area is not part of content area.

Reproducible: Always

Steps to Reproduce:
1. See the CSS
2. Focus on "div#page > div.body > div.left" div width
3. Remove left and right paddings of this div in CSS and see div becomes less wide after page reload
Actual Results:  
Width of div changes

Expected Results:  
Width of div should not change because, according to box model of W3C, padding area is a part of content area
(Reporter)

Updated

9 years ago
Version: unspecified → 3.0 Branch
(Reporter)

Comment 1

9 years ago
Well, seems i have sorted out that all the browsers i had (IE8, latest Opera, latest Safari and latest Chrome) rendered the layout by implicitly applying border-box of box-sizing to all "display:table-*" elements. Seems FF doesn't do this why this leads to this incompatibility between FF and other browsers.

Just found another issue - when no paddings are used on a "display:table-cell" element and there is a border (for example - 1px wide) on a "display:table" element with 100% of height and border-box of box-sizing, FF adds +2 extra pixels to width and height, where it shouldn't.

An example is here (please note the vertical scrollbal where it shouldn't appear) - http://www.stepanov.lv/pub/mozilla/bugs/table-cell-border.html
Summary: div with "display: table-cell" renders incorrect width when side paddings used → div with "display: table-cell" renders incorrect width when padding is used, also width is incorrect if no padding and got border
(Reporter)

Comment 2

9 years ago
Regarding first report on incorrect width of cell: explicit setting of "box-sizing: border-box" to "div#page > div.body > div.left" doesn't fix the problem.

Updated

9 years ago
Component: General → Style System (CSS)
Product: Firefox → Core
QA Contact: general → style-system
Version: 3.0 Branch → 1.9.1 Branch
Component: Style System (CSS) → Layout: Tables
QA Contact: style-system → layout.tables

Comment 3

7 years ago
This issue still exists on all platforms

Comment 4

4 years ago
I suspect this is a dupe of bug 248239 - can you check if this is fixed in current nightly builds ( https://nightly.mozilla.org/ ) ?
Flags: needinfo?(saetia)
Flags: needinfo?(ninzya)

Comment 5

4 years ago
Going to assume my guess is right. Please undupe and reopen if I'm missing something.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 years ago
Flags: needinfo?(saetia)
Flags: needinfo?(ninzya)
Resolution: --- → DUPLICATE
Duplicate of bug: 248239

Comment 6

4 years ago
Those two bugs are not related, bug 248239 deals with actual tables.
please undupe.
Status: RESOLVED → REOPENED
Ever confirmed: true
Resolution: DUPLICATE → ---

Comment 7

4 years ago
The URL appears to be 404 now. Can you attach a test case?

Comment 8

4 years ago
Created attachment 8526001 [details]
Testcase

Comment 9

4 years ago
I created a testcase everything seems to be A-OK.

Updated

4 years ago
Status: REOPENED → RESOLVED
Last Resolved: 4 years ago4 years ago
Resolution: --- → FIXED

Comment 10

4 years ago
We don't normally mark things fixed unless we know when and why/how they were fixed. :-)
Resolution: FIXED → WORKSFORME

Comment 11

4 years ago
15.0.1: Broken.
16.0: Fixed.

While I do not remember if display:table-cell was considered while applying my patch, it seems that it did the trick here as well. No need to thank me!
Resolution: WORKSFORME → FIXED
You need to log in before you can comment on or make changes to this bug.