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

RESOLVED DUPLICATE of bug 569645

Status

()

Core
Layout: Tables
RESOLVED DUPLICATE of bug 569645
7 years ago
7 years ago

People

(Reporter: BillR, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

7 years ago
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.
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...
Status: UNCONFIRMED → NEW
Component: Style System (CSS) → Layout: Tables
Ever confirmed: true
QA Contact: style-system → layout.tables
Created attachment 512692 [details]
The testcase
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.
(Reporter)

Comment 4

7 years ago
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.
(Reporter)

Comment 5

7 years ago
vertical-align doesn't do much when cells are empty; whether set in the table-row or table-cell.   does work.
(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.
Odd.  Setting "vertical-align: top" on the cells works for me.
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 569645
(Reporter)

Comment 9

7 years ago
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?
(Reporter)

Comment 10

7 years ago
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.
Status: RESOLVED → REOPENED
Resolution: DUPLICATE → ---
No.
Status: REOPENED → RESOLVED
Last Resolved: 7 years ago7 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 569945
Duplicate of bug: 569645
> 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"...
You need to log in before you can comment on or make changes to this bug.