1040934 - display: table-cell height too large when cell is empty

Status: RESOLVED DUPLICATE of bug 569645

(Core :: Layout: Tables, defect)

Description

[Robert]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36

Steps to reproduce:

On this js fiddle http://jsfiddle.net/tF56p/9/ one should see a multicolor rectangle that is 40px tall all the way across. It starts with a blue 40x40 square, followed by some text in a green rectangle that's above a red rectangle, followed by an orange 40x40 square.


Actual results:

In Firefox 30 on both Win7 and OSX, the height of the .cell divs are inexplicably 66px, instead of the 40px specified by the CSS. That extra height is coming from the red rectangle that appears above "Test" for no apparent reason.

This extra height is apparently being added because of the presence of the empty .last div. If .last is made to no longer be empty (by adding some text to it, then pressing "Run" in the upper left), the height of the .cell divs returns to the expected 40px. Removing the .last div also repairs the height of the remaining .cell div.


Expected results:

Every other browser I've tested (Chrome and Safari on OSX, IE11 on Win7, Mobile Safari on iOS7) displays the .cell divs at 40px height, as expected.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Robert, thank you for the bug report and the testcase!

Both cells, the one with text, and the one without have baseline alignment and a 40px height set.

Per CSS 2.1 section 17.5.3:

  The baseline of a cell is the baseline of the first in-flow line box in the cell, or the
  first in-flow table-row in the cell, whichever comes first. If there is no such line box
  or table-row, the baseline is the bottom of content edge of the cell box.

So the cell with text in it has a baseline on the baseline of the text and the empty cell has a baseline at the bottom of the 40px by 40px square that is its content area (but more on this below).

The spec goes on to say:

  The maximum distance between the top of the cell box and the baseline over all cells
  that have 'vertical-align: baseline' is used to set the baseline of the row.

In this case both cells are 'vertical-align: baseline', so the baseline of the row is set 40px from the top of the row.

Then the cells are aligned with their baselines on the baseline on the row.  This is done by adding padding to the cells:

  Cell boxes that are smaller than the height of the row receive extra top or bottom
  padding. 

The net result is that the cell with text in it is positioned with the baseline of the text 40px below the top of the row, which is exactly the rendering you're seeing.

I think the only issue we have here is this bit earlier in the spec:

  In CSS 2.1, the height of a cell box is the minimum height required by the content. The
  table cell's 'height' property can influence the height of the row (see above), but it
  does not increase the height of the cell box. 

So we should not in fact be putting the baseline of the empty cell 40px from its top, but rather at its top edge, since it has no content...  This didn't use to be what the spec said when tables were implemented, but then the spec got changed.  Bug 569645 covers this issue.

In the meantime, either giving the empty cell auto height or giving it non-baseline vertical alignment should be a reasonable workaround if one is needed.