CSS table, table-cell height issue in Firefox

Question

To start with, I have examples and code here (a site I keep to play with stuff). This is the actual link just in case: http://www.williamrosmus.com/examples/calendar1_wf.html

This is an issue I am having specifically with Firefox (I'm using v3.6), and am wondering what is going on. Requonc displays reasonably and IE8 perfectly.

For a learning exercise I manually 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.

Any suggestions or comments on how to fix this to display correctly or what is going on with Firefox?

Regards,

BillR

Further to this, as per the suggestion by Robin, I logged this as a bug on mozilla.org. Someone just confirmed it there. In case anyone is interested:

https://bugzilla.mozilla.org/show_bug.cgi?id=634489

Answer 1

Just stick   inside the empty cells?

I just tested, and this fixes it in Firefox.

---

I found a page which talks a little more about the problem you're having.

It suggests a CSS alternative; table { empty-cells: show }, see:

https://developer.mozilla.org/en/CSS/empty-cells

However, this doesn't seem to help in Firefox with your <div> tags with display: table-cell.

Answer 2

See discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=634489 and https://bugzilla.mozilla.org/show_bug.cgi?id=569645 for further details. (Using 'vertical-align:top' or 'vertical-align: bottom' on all the table cells should be a reasonable workaround, though.)

Answer 3

I believe this is a bug in Gecko. I trawled through Bugzilla (https://bugzilla.mozilla.org/) but couldn’t find any other people reporting this. It’s probably worth filing a bug with a reduced testcase (or just link in your current one) to see what the devs over there make of it.

Regarding a specific workaround, thirtydot’s suggestion of an   is probably your best bet.