asked on

XHTML compliant table formatting

Experts, I'm doing some development in XHTML, and have come across a problem with setting tables to be 100% the width and height of the page.

Basically, I've found a way to set the table to fit the size of the page, but the top row of the table will not set to 40px height. Also, in the bottom row, the Iframe isn't rendering on the page (if I remove the height and width attributes it renders fine, but doesn't expand to fit the table cell).

How can I achieve the above, but still keep my page XHTML compliant?

The code from my page is below.

Many thanks!

////////////////////////////////////////////////////////////////////////////////////////////

<!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</title>
</head>
<body style="height: 100%; width: 100%; margin: 0px;">

      <table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="1">
            <tr style="height: 40px;">
                  <td valign="top" style="height: 40px;">
                        Top Row
                  </td>
            </tr>
            <tr>
                  <td>
                        Bottom Row
                        <iframe id="ifrArticle" width="100%" height="100%" frameborder="yes" src="http://www.google.com"></iframe>
                  </td>
            </tr>
      </table>
</body>
</html>

////////////////////////////////////////////////////////////////////////////////////////////

SOLUTION

Eternal_Student

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SamDorling

ASKER

Thanks for the comment Eternal_Student, however I was hoping to find a solution that didn't involve having to use JavaScript to set the height of rows - is there no way of doing what I want to achieve just via HTML, but keeping it XHTML compliant?

Thanks!

SOLUTION

dharmeshmaniar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SamDorling

ASKER

Thanks dharmeshmaniar, we're getting there, however the page is now 100% height plus 40 extra pixels (i.e. there's a scroll bar on the page, and the iframe goes off the bottom of the page by 40 pixels, presumably due to setting the bottom cell to be 100% height).

How can I get the iframe to fit the bottom cell, but not go off the bottom of the page?

Thanks!

ASKER CERTIFIED SOLUTION

zeroxp

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

zeroxp

a work around with min-height for mozilla, (ie renders in another manner anyway, so it will be full height)

<!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</title>
<style type="text/css">
html {height: 100%;}

body {min-height: 95%; margin: 0; padding: 0; height:100%;}

* html body {height:100%;}
</style>
</head>
<body>
<table style="width:100%; height:100%;" cellpadding="0" cellspacing="0" border="1">
<tr>
<td style="vertical-align:top; width:100%; height:10%;">Top Row</td>
</tr>
<tr>
<td style="width:100%; height:89%;">
<iframe id="ifrArticle" width="100%" height="100%" frameborder="1" src="http://www.google.com"></iframe>
</td>
</tr>
</table>
</body>
</html>