TR with 100% height stretching below window in IE

[guaranine]

Hi,

I've got the 100% height for the whole table working. What is really confusing me is how to make the TR tag in which the content is work properly in IE.

If I do not explicitly specify its height, there is a gap between the header and the content with background images continuing from the header. Here's how it looks: http://graphics.filefest.net/mie350/...?page=swimming

However, if I do set the height of the content TR to be 100%, it does close that gap, but it also creates a blank space at the bottom of the page (so the height of the TR really is 100% of the window), enabling the scrollbar when it's not needed. Here's how it looks: http://graphics.filefest.net/mie350/...?page=swimming

I have had this problem for several websites I've made already and I'm still not sure how I should go about solving it. On my mac, Safari and Camino (the Mozilla-based osx browser) render it fine, but IE does not.

Any comments would be greatly appreciated. Sorry for not posting any code snippets right at this moment - I'll do that as soon as I get back home.

Thanks in advance,

.Igor N

[drhowarddrfine]

Validate and fix your 9 html errors and three css errors first.

[guaranine]

Sorry about that; I checked it over and there should be no CSS/HTML errors now.

Here's the code for the pertinent css:

html, body {
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
    }
div.body {
    font-size:11px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:20px;
    color:#333333;
    width: 512px;
    height: 100%;
    border-right:1px solid #cccccc;
    padding-top:20px;
    padding-right:70px;
    padding-left:70px;
    padding-bottom: 25px;
    }
 

Here is relevant table code:

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" style="height:100%; border-right:1px solid #cccccc; border-left:1px solid #cccccc;">
 <tr>
     <td width="653" valign="top" height="193"><div style="position:relative">
     ... (top banner here)
     </td>
     <td width="307" height="193" style="background:url(img/side-bg.gif);" valign="top">
     ... (top menu here)
     </td>
 </tr>
 <tr>
     <td width="653" valign="top" style="height:100%">
     ... (content here, where the body CSS is used)
     </td>
     <td style="background:url(img/side-bottombg.gif);" valign="top">
     <div align="center" style="margin-top:50px;"><img src="content/test.jpg" alt="side bg" /></div></td>
  </tr>
 </table>  
 

And the td content changes for http://graphics.filefest.net/mie350/...?page=swimming :

<td width="653" valign="top" style="height:100%">  
 

So I basically added the height=100% there. Has anyone else encountered this problem before?

Thanks again,

.Igor N

[drhowarddrfine]

I always have a hard time figuring out tables when they're used for layout but IE doesn't do height correctly. It treats it as min-height so that might be something to look into. min-height, itself, doesn't work at all in IE so be wary of that.