634489 - pure css table table-cell height displays incorrectly (too high) when a cell in a table-row is empty

Status: RESOLVED DUPLICATE of bug 569645

(Core :: Layout: Tables, defect)

Description

[BillR]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 

As an example of this bug I created a calendar in xhtml using CSS tables rather than traditional html tags. I set the height and width for the cells to be 100px by 100px. However the top and bottom rows, where some of the cells are empty display way too high in Firefox. 

The linked URL has the test case including what it looks like and what it should look like (even if it is kludged).

http://www.williamrosmus.com/examples/calendar1_wf.html

Reproducible: Always

Steps to Reproduce:
1. See the supplied URL in the 'Details'. It has a full example.

Actual Results:  
1. See the supplied URL in the 'Details'. It has a full example.

Expected Results:  
1. See the supplied URL in the 'Details'. It has a full example.

Comment 1

[Boris Zbarsky [:bzbarsky]]

The relevant spec section is http://www.w3.org/TR/CSS21/tables.html#height-layout the part that says:

  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.

The problem is that we actually make the cell box 100px tall, whereas the same spec section says that the "height" property on a cell does not affect the height of a cell box, just the height of the row.  So in the first row there the empty cells extend 100px above the baseline while the nonempty ones have a baseline somewhere in the middle, so the total height ends up more than 100px...

Sounds like we really need to rejigger cell vertical alignment...

Comment 2

[Boris Zbarsky [:bzbarsky]]

Attachment: The testcase

Comment 3

[Boris Zbarsky [:bzbarsky]]

For what it's worth, you should be able to work around this for the moment by putting   in the empty cells, or by changing the vertical-align of the cells to top or bottom instead of baseline.  Depending on what sort of content will go in the cells you may want the latter anyway.

Comment 4

[BillR]

Someone suggested the non-breaking space and it seems to work. I'll try chaning the vertical-align and see how that works.  I really like the pure css tables. I've been waiting for them to be supported in most browsers for a while to help with a project I've been planning. Thanks for the suggestion. Looking forward to the fix. Regards.

Comment 5

[BillR]

vertical-align doesn't do much when cells are empty; whether set in the table-row or table-cell.   does work.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to comment #1)
>   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.
> 
> The problem is that we actually make the cell box 100px tall, whereas the same
> spec section says that the "height" property on a cell does not affect the
> height of a cell box, just the height of the row.

... which was actually a very recent change to the spec.

If that's the only problem here, then this is a duplicate of bug 569645.

Comment 7

[Boris Zbarsky [:bzbarsky]]

Odd.  Setting "vertical-align: top" on the cells works for me.

Comment 9

[BillR]

If you check the test case I created, the vertical-align was set to top and it still did this.  Or how/where are you setting this?

Comment 10

[BillR]

This was marked as a duplicate of bug 569645. This refers to CSS tables and the other seems to refer to html tables. Is there not a difference to how they are handled? Just curious.

Comment 11

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

No.

Comment 13

[Boris Zbarsky [:bzbarsky]]

> the vertical-align was set to top

No, it's set to "text-top" in your testcase.  If you read the spec linked to in comment 1, it says this:

  sub, super, text-top, text-bottom, <length>, <percentage>
    These values do not apply to cells; the cell is aligned at the baseline
    instead. 

I just took your testcase and replaced "text-top" with "top"...