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

Status: RESOLVED FIXED

(Core :: Layout: Tables, defect)

Description

[Dmitry Stepanov]

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

Comment 1

[Dmitry Stepanov]

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

Comment 2

[Dmitry Stepanov]

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.

Comment 3

[Joel Glovacki]

This issue still exists on all platforms

Comment 4

[:Gijs (he/him)]

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

Comment 5

[:Gijs (he/him)]

Going to assume my guess is right. Please undupe and reopen if I'm missing something.

Comment 6

[Tal Aloni]

Those two bugs are not related, bug 248239 deals with actual tables.
please undupe.

Comment 7

[Simon Pieters [:zcorpan]]

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

Comment 8

[Tal Aloni]

Attachment: Testcase

Comment 9

[Tal Aloni]

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

Comment 10

[:Gijs (he/him)]

We don't normally mark things fixed unless we know when and why/how they were fixed. :-)

Comment 11

[Tal Aloni]

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!