473,378 Members | 1,417 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

TR with 100% height stretching below window in IE


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
3 2019
7,435 Expert 4TB
Validate and fix your 9 html errors and three css errors first.
Nov 25 '07 #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.     }
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>  
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%">  
So I basically added the height=100% there. Has anyone else encountered this problem before?

Thanks again,

.Igor N
Nov 25 '07 #3
7,435 Expert 4TB
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

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

Similar topics

by: M2 | last post by:
Hi All, I am using a div with a 100% height (within a document with body with body and html set to 100% too) as a method of getting some colored bars down the side. This seems to work just fine in...
by: Not4u | last post by:
Hello, I have a problem with CSS code. I want to have one menu column with a fixed width and a 100% height and the rest of the page for content. ---------------- |.|.|<--100%-->|...
by: Charles | last post by:
I am designing a small HTML editor, and in the lower pane, I want the textarea to use 100% height with the toolbar, but no more than that: http://www.auriance.com/docs/tmp/editor/ Actually it...
by: joshthomas99 | last post by:
Hello, Yes, I've spent hours reading through all the old postings and searched the net - but couldnt find a solution to the 100% height problem with nested divs. Basically I want the first...
by: JimmyHoffa | last post by:
Can anyone help me get I.E 6 to show an absolute positioned div with height as 100% to actually be 100% height of its containing div (which also has height set to 100%)? I.E 7 and Firefox both...
by: sannymak | last post by:
Hello All, I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution: HTML CODE: <!DOCTYPE html PUBLIC...
by: ukfusion | last post by:
I have a div which i have 100% height applied to.....as i do with my body/html tags. The problem is my div only fills 100% of the visible window, it doesnt fill the scoll beneath. my layout is...
by: beansetc | last post by:
Since I began doing CSS layouts instead of tables last year, it seems like every single site I do I run into the same problem -- getting a div to stretch to 100% height. I find the solution to it, it...
by: janek | last post by:
Can some please tell me how can i apply CSS height in % for inner div? what i am trying to do is applying a bg color to an inner div ( fill class div ) based on height in % Below is the code,...
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.