views:

22

answers:

2

So I'm setting up a page with a bunch of dynamic content. I'm organizing this within a table. There are three rows, each with a single cell. The top part works as a fixed header, since I've set the top cell's height. The bottom cell works as a footer, since it also has a static height. The table's total height is set to 100% and the middle row/cell is left to be filled with dynamic content and the remaining space in the table. Here is a two-rowed example to demonstrate the problem:

<html>
  <body>
    <div class="element_container", style="width: 600px; height: 500px;">
      <div class="table", style="display: table; height: 100%; width: 100%; background: blue;">
        <div class="row", style="display: table-row;">
          <div class="cell", style="display: table-cell; height: 40px; width: 100%; background: green;">
          </div>
        </div>
        <div class="row", style="display: table-row;">
          <div class="cell", style="display: table-cell; height: 100%; width: 100%; background: red;">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

In chrome/ff/safari, the total height of the table is kept at 500px. In IE8, it becomes 540px, as if the 100% height from second cell are inherited from the table itself, and not it's parent row.

Is there anyway to get tables to work the same way across browsers? Or, at the very least, obtain the same sort of functionality within tables in IE8? ​

+1  A: 

Not sure why you are trying to create a table without just using the table tag? This appears to work fine.

<html>
  <body>
    <table style="width:600px; height:500px; background:blue;">
      <tr>
        <td style="height:40px; background: green;">Hi</td>
      </tr>
      <tr>
        <td style="background: red;">Hello</td>
      </tr>
    </table>
  </body>
</html>
corymathews
The biggest problem with this is that I still need to use the height: 100% to get my content displayed correctly. I am rendering some partials with the help of rails, and that makes of up for my dynamic content. Without the height being set to SOMETHING, the table will automatically collapse the cell when the rendered partial (who has a div that is 100%/100%) doesn't inherit the height.
Winston Zirjacks
A: 

One of the biggest problems with IE is its default interpretations for cell alignment: and also it's alternative box model. Often things that are 500px tall in standards compliant browsers are taller or wider in IE.

Best option is to use conditional comments for IE style-sheets: I go as far as using one for IE 6,7,8 to force the site to look consistent across all browsers.

Try something like:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="includes/styleIE6.css" /><![endif]--> 

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="includes/styleIE7.css" /><![endif]-->

<!--[if IE 8]><link rel="stylesheet" type="text/css" href="includes/styleIE8.css" /><![endif]-->

Alternately, it seems there is no reason for you to be using a table. Create divs instead for a more consistent layout.

Jamin