Home/ Questions/Q 362941
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T13:17:42+00:00

Consider the following simple html page markup: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

  • 0

Consider the following simple html page markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<style type="text/css">
        body, html
        {
            height: 100%;
            width: 100%;
        }
        td
        {
            border:1px solid red;
        }
        table
        {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
        <tr>
            <td style="width: 100%; height: 100%;">
                cell 1
            </td>
            <td style="width: 100%; height: 100%;">
                cell 2
            </td>
        </tr>
        <tr>

            <td style="width: 100%; height: 100%;">
                cell 3
            </td>
            <td style="width: 100%; height: 100%;">
                cell 4
            </td>
        </tr>
    </table>
</body>
</html>

In IE 7/8/Opera, the 100% height of the tags is interpreted as 100% of the page, where as in Firefox/Chrome/Safari, the entire table takes up the entire height of the page, and instead, the table rows fill in the remaining space that they are given. I need IE to behave the same way as non-IE browsers. Is there a way to get this same behavior in IE using the XHTML transitional doctype? I have been working on a crazy javascript routine to mimic the behavior but I’m wondering if there is a simpler way like a CSS hack or something. Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">
<html xmlns="http://www.w3.org/1999/xhtml">
  <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>
    • 0