Table height issue in IE7

**leodippolito** · Feb 12, 2007 09:55

Hi there,

I have this code:

---

HTML Code:

<!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, body
       {
               margin: 0;
               padding: 0;
               border: 0;
               height: 100%;
               width: 100%;
       }
   </style>

</head>
<body>

   <table id="mainTable" cellpadding="0" cellspacing="0"
style="height: 100%; width: 100%;">

   <tr id="header" style="height: 60px;">
       <td style="background-color: yellow;">header</td>
   </tr>

   <tr id="contents" style="height: 100%;">
       <td style="background-color: red;">contents</td>
   </tr>

   <tr id="footer" style="height: 60px;">
       <td style="background-color: blue;">footer</td>
   </tr>

   </table>

</body>
</html>

---

It works fine in Firefox (I have a table with the maximum screen height and no scrollbars).

In IE7 I get a vertical scrollbar and the table looks larger (in height) than it should be.

I don't understand.... What am I doing wrong?

How can I have the same Firefox appearence in IE7?

Thanks!

**Dan Schulz** · Feb 12, 2007 10:53

Is this table for layout purposes, or are you planning on using this table to contain tabular data?

**leodippolito** · Feb 13, 2007 04:14

For layout...

**Dan Schulz** · Feb 13, 2007 09:16

Ok, is there any particular reason why you're using a table for this particular layout? (Yes, I prefer CSS and semantic markup for my layouts, but I'm not going to shove it down your throat. I've also found in my personal experience that using tables for layout to be an extreme pain in the neck. Let me check with someone I know who's very good with layout tables; he may be able to help you better than I can should you wish to stick with them.)

**leodippolito** · Feb 14, 2007 10:35

Actually I don't have much choice.

I am using webparts and it renders as tables. It is internal Microsoft code.

But I need this behavior of 100% height to work correctly.

This small layout that I posted is a simulation of the webparts scenario that I have.

Thanks!

User Tag List

Thread: Table height issue in IE7

Thread Tools

Display

Table height issue in IE7

Bookmarks

Bookmarks

Posting Permissions