Abo had a question about 100% heights of DIVs inside cells of HTML tables. I say: don’t even think about it. Why? Well, here’s my analysis.
Browsers usually have two different modes they operate in. Quirks Mode, which has historical reasons and Strict Mode which is standardized via CSS and HTML recommendations (Check out quirksmode.org and hsivonen.iki.fi/doctype for details). Strict Mode is the recommended one to use when creating new web pages.
I’ve created two different test pages. One potentially running in Strict Mode and one in Quirks Mode. Both pages contain one table with one row and three cells. All cells where set to 100% height via CSS rules and contain a red DIV with height 100%. A second test on each page also set the row to 100% height.
The expected result for Quirks Mode is actually not defined (as far as I know). In Strict Mode however, the standards says that a height of 100% means an element should have the same height as its parent. If a parent has the height “auto”, which is the default, then all children with height 100% also get the height “auto”. So the inner red DIVs should all have the height of the text inside, i.e. different heights.
The results are fascinating. In Quriks Mode, Firefox 1.5, IE 6.0, IE 5.5, and Konqueror 3.5 do what Abo wished: All red DIVs had the same height. Safari 2 and Opera 8.5 however behaved like in Strict Mode (where Opera shows only the first line of each DIV with the row set to 100% height).
In Strict Mode, Firefox 1.5 behaves like in Quirks Mode with the row set to height 100%, Opera doesn’t display the table at all! IE 5.5 only supports Quirks Mode and hence it displays the cells accordingly. IE 6.0, Firefox 1.5, Safari 2, and Opera 8.5 (without the 100% height row trick) behave like the Strict Mode standard says – all red DIVs have different heights.
All this basically means that you will not find a way to have a 100% height of inner DIVs inside tables that works with every modern browser currently on the market – so I don’t recommend this method. There are CSS tricks to do it, but they are also not really cross-browser. As far as I know, currently no reliable way exists to give different liquid DIVs (their height is determined by the text inside) the same height, without using JavaScript tricks.
[tags]table, cell, height, 100%, modern browsers, CSS, internet explorer, firefox, opera, safari, quirks mode, strict mode[/tags]