Table cell min-height in Firefox
This week I came across a couple of cross-browser css quirks that I’d never seen before (I guess because I’d never needed to implement the elements that caused them). One that really stood out was the way that Firefox handles height values on table cells differently to other browsers.
Most browsers use the normal ‘content box’ model to render table cell content (some slightly differently, and we have all had to deal with these box model quirks over the years), but Firefox uses the ‘border box’ model. You can see a group of examples on Bruno Fassino’s site.
Simply put, it changes the calculation of the total rendered height of the table cell. So setting a height of 130px and a border of 5px means that the cell will be rendered as 140px in Firefox but 130px in every other browser. Bah!
It also ignores min-height values, and treats height values as min-height instead.
There is a CSS3 property called box-sizing, that allows you to specify which model you want to use, but that changes the model for the width as well, which causes some more issues for width calculations.
Solutions
There are a couple of solutions to get round this if you need a whole row of table cells to be a certain height, but don’t want the hassle of working out widths (if you use the box-sizing css3).
1. Find a cell on the row that contains a fixed height element (e.g. a button, or a title you know won’t change in length), and set top and bottom padding on that to get what you need.
2. Or, if you don’t have a fixed height element, then you can add a div around the contents of a table cell and set the min-height on that.
Simple fix, but it took me a good bit of poking around to find the reason for the quirk, I hope it helps someone else.