Last Comment Bug 634489 - pure css table table-cell height displays incorrectly (too high) when a cell in a table-row is empty
: pure css table table-cell height displays incorrectly (too high) when a cell ...
Status: RESOLVED DUPLICATE of bug 569645
:
Product: Core
Classification: Components
Component: Layout: Tables (show other bugs)
: unspecified
: x86_64 All
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
http://www.williamrosmus.com/examples...
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2011-02-15 17:57 PST by BillR
Modified: 2011-02-15 21:55 PST (History)
3 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
The testcase (12.10 KB, text/html)
2011-02-15 19:09 PST, Boris Zbarsky [:bz]
no flags Details

Description BillR 2011-02-15 17:57:01 PST
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 [:bz] 2011-02-15 19:08:47 PST
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 [:bz] 2011-02-15 19:09:25 PST
Created attachment 512692 [details]
The testcase
Comment 3 Boris Zbarsky [:bz] 2011-02-15 19:11:35 PST
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 2011-02-15 20:03:51 PST
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 2011-02-15 20:18:41 PST
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+2 (review requests must explain patch) 2011-02-15 20:24:22 PST
(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 [:bz] 2011-02-15 20:25:18 PST
Odd.  Setting "vertical-align: top" on the cells works for me.
Comment 8 David Baron :dbaron: ⌚️UTC+2 (review requests must explain patch) 2011-02-15 20:25:27 PST

*** This bug has been marked as a duplicate of bug 569645 ***
Comment 9 BillR 2011-02-15 20:33:07 PST
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 2011-02-15 20:35:46 PST
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+2 (review requests must explain patch) 2011-02-15 21:17:43 PST
No.

*** This bug has been marked as a duplicate of bug 569945 ***
Comment 12 David Baron :dbaron: ⌚️UTC+2 (review requests must explain patch) 2011-02-15 21:18:22 PST

*** This bug has been marked as a duplicate of bug 569645 ***
Comment 13 Boris Zbarsky [:bz] 2011-02-15 21:55:07 PST
> 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"...

Note You need to log in before you can comment on or make changes to this bug.