CSS Table, Table-cell Height Issue In Firefox

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

Solution 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.

Solution 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.)

Solution 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.

Solution 4:

When i changed your display of the div.calendar_day to "inline-block" or "block" instead of table-cell and added float:left the height was rendered properly.