2

I have a strange behaviour with DIV-Table

Here a jsFiddle with my simplified example. Relevant part of CSS is the following:

.cell { display: table-cell; width:35px; height:12px; font-size:1px; overflow:hidden; line-height:1em; }

Actually, font-size is set to 1px.

In Firefox, if I increase font-size (with inspector for example) until 13px, cells' height decrease instead of increase. Over this threshold, cells' height start to increase to accomodate test strings. height property seems completely ignored.

In Chrome, beahaviour is almost one desired (increasing font-size results in a continuous cells' height increase) but, again, height property seems completely ignored.

If I don't set display: table-cell;, increase of font-size does not affect DIVs' height and eventually too big text is simply hidden thanks to overflow:hidden.

UPDATE:

I just discovered that forcing vertical-align makes Firefox behaviour similar to Chrome one (cells' height remains fixed until text fit inside them). I don't know why, but seems that for Firefox is necessary to force this property.

Anyway, remain the other need: how to avoid that increasing font-size over 13px will results in ignoring cells height, and auto-adjust it?

Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
  • Thanks to [this similar question](http://stackoverflow.com/questions/19428121/height100-inside-table-cell-not-working-on-firefox-and-ie) I can add only that setting `height:100%;` to `table-cell` makes height of DIV dependent only by `font-size` in Firefox too. But is not the solution. I would like to mantain FIXED div's height. – Luca Detomi May 29 '15 at 10:19
  • The standard behaviour of table cells is that they grow with their content, even if you set a height. So a cell with `height:20px` and a content of 30px high will increase itself to 30px high. That is normal and expected behaviour. On the other hand, the bit where the height decreases if you increase the font size is very strange. It could even be a bug... – Mr Lister May 29 '15 at 18:17
  • Yes, I can understand first part of your answer, but like you said... is very strange the second behaviour.... maybe someone has some explanation? – Luca Detomi Jun 01 '15 at 06:47

0 Answers0