ansaurus

Question

Table row height behavior in IE vs Firefox/Chrome/Safari

Answer 1

+1 A:

I've updated your markup so that the table and its rows are styled instead of the individual table cells. Also, each of the rows is allotted 50% height instead of 100% previously allotted to the individual table cells.

The following markup renders similarly against Internet Explorer 7, FireFox 3.5.3, Google Chrome 3.0.195.21, and Opera 10, and last but not least Safari 4.0.3.

<!DOCTYPE html PUBLIC 
   "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <title>Test Bed</title>
    <style type="text/css">
      html, body, table
      {
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;            
        border-collapse: collapse;
      }               

      table tr.firstRow 
      {
        height: 5%;
      }

      table tr
      {
        height: 95%;
      }

      table td 
      {
        border:1px solid red;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <table cellpadding="0" cellspacing="0">
      <tr class="firstRow">
        <td>cell 1</td>
        <td>cell 2</td>
      </tr>
      <tr>
        <td>cell 3</td>
        <td>cell 4</td>
      </tr>
    </table>
  </body>
</html>

David Andres 2009-09-19 21:24:35

This is definitely more of a correct way of doing this but it's not quite what I'm looking for for my particular scenario. In firefox, let's say you set the cells in the first row to a static "50px" height. If you set the second row cells at "100%" height, it will fill the remaining space of my 100% height table, and not take up 100% of the page. Since I have specified my table to take up 100% of the page, I need the cells to take up the remaining space, regardless of what types of heights are used in the cells.

Nate 2009-09-19 21:35:02

@Nate: for that to work, you're going to have to remove the transitional DTD. It's probably also better to have the last row grow into the size of the table without a height of 100%, which can be construed by one browser to mean "full size of table" instead of "what's left of table."

David Andres 2009-09-19 21:54:33

If your table has a single td without a height specified and the table is 100% height, that td without a height should fill up any remaining space.

PHLAK 2009-09-20 05:29:31

@David: Long story short, I'm working on a weird ASP project and, thanks to your quirks mode suggestion, I got the idea to force only IE into quirks mode from the server side and it works well. I understand that IE takes the W3C specs a little more literally but that doesn't really help the developer much ;)

Nate 2009-09-21 16:57:20

@Nate: I'm glad this kinda sorta works for you. Quirks mode blows.

David Andres 2009-09-21 17:03:05

@David: Indeed...I am going to take that one step further and say IE blows :)

Nate 2009-09-22 21:14:30

ansaurus

tags:

views:

answers:

Table row height behavior in IE vs Firefox/Chrome/Safari

related questions