By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,885 Members | 1,072 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,885 IT Pros & Developers. It's quick & easy.

TR with 100% height stretching below window in IE

P: 2
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
Nov 25 '07 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Validate and fix your 9 html errors and three css errors first.
Nov 25 '07 #2

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

Here's the code for the pertinent css:

Expand|Select|Wrap|Line Numbers
  1. html, body {
  2.     height:100%;
  3.     margin: 0;
  4.     padding: 0;
  5.     border: none;
  6.     }
  7. div.body {
  8.     font-size:11px;
  9.     font-family:Arial, Helvetica, sans-serif;
  10.     line-height:20px;
  11.     color:#333333;
  12.     width: 512px;
  13.     height: 100%;
  14.     border-right:1px solid #cccccc;
  15.     padding-top:20px;
  16.     padding-right:70px;
  17.     padding-left:70px;
  18.     padding-bottom: 25px;
  19.     }
  20.  
Here is relevant table code:
Expand|Select|Wrap|Line Numbers
  1. <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" style="height:100%; border-right:1px solid #cccccc; border-left:1px solid #cccccc;">
  2.  <tr>
  3.      <td width="653" valign="top" height="193"><div style="position:relative">
  4.      ... (top banner here)
  5.      </td>
  6.      <td width="307" height="193" style="background:url(img/side-bg.gif);" valign="top">
  7.      ... (top menu here)
  8.      </td>
  9.  </tr>
  10.  <tr>
  11.      <td width="653" valign="top" style="height:100%">
  12.      ... (content here, where the body CSS is used)
  13.      </td>
  14.      <td style="background:url(img/side-bottombg.gif);" valign="top">
  15.      <div align="center" style="margin-top:50px;"><img src="content/test.jpg" alt="side bg" /></div></td>
  16.   </tr>
  17.  </table>  
  18.  
And the td content changes for http://graphics.filefest.net/mie350/...?page=swimming :
Expand|Select|Wrap|Line Numbers
  1. <td width="653" valign="top" style="height:100%">  
  2.  
So I basically added the height=100% there. Has anyone else encountered this problem before?

Thanks again,

.Igor N
Nov 25 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
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.
Nov 25 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.