100% table height HTML/CSS with XHTML Transitional

**letsgetsilly** · 06-11-2007 09:33 AM

Hi all,

I have a very simple site! I am trying to implement a moo-tools javascript function to my main page, and in order to do so, I needed to change my doctype to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Problem is, now my 100% height tables fail to stretch. I need a simple header, body, footer setup. 1 column only. None of my tricks seem to work.

If you could check out my code and let me know what I can do to get things to stretch and footers to work, that'd be great! Thanks!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html,body{
      margin:0;
      padding:0;
      height:100%;
      border:none;
      background-color:White;
   }
	
#fullheighttable 
{
border:0;
padding:0; 
BACKGROUND-COLOR: white ;

height:100%;
}



<body  onload="loadXML(); scrollDiv_init()" >
	<div id="scrolldisplay" onMouseOver="pauseDiv()" onMouseOut="resumeDiv()"></div>
		<table id="fullheighttable" cellspacing="0" cellpadding="0" style="border:solid 1px black" >
			<tr>
				<td>
				    <table cellspacing="0" cellpadding="0" border="0">
						<tr>
							<td>
							<map id="map1" name="map1"><area style="HEIGHT: 98px" shape="RECT" alt="Systems" coords="4,0,240,95" href="index.aspx"></map>
							<img  src="Images/MainNavigation/img_header.jpg" usemap="#map1" />
							</td>
						</tr>
					</table>
					<table  cellspacing="0" cellpadding="0" border="0">
						<tr >
							<td>(MAIN HORIZONTAL MENU GOES HERE)</td>
						</tr>
					</table>
					<table cellspacing="0" cellpadding="0" border="0" >
					    <tr>
					        <td>
					        <div style="display:block; background-image:url(Images/Index/_main1.jpg); width:782px; height:422px; "></div>
					       </td>
					    </tr>
					</table>
				</td>
			</tr>
			<tr  style="height:100%; vertical-align:bottom;">
				<td id="indexbackground" style="background-color:blue" >
				<img alt="" src="Images/Misc/img_footer.jpg" />
				
				</td>
			</tr>
		</table>
		
		
		<a style="display:block; position:absolute;  height:42px; width:84px; top:507px; left:258px;"  href="Images/Index/_CMMI3_certif.jpg" rel="lightbox" ></a>
		
		</body>

**WebJoel** · 06-11-2007 05:59 PM

Generally, the only way you can get a 'child element' to be 100% height, is if the parent element is also 100% height. You have this, -but there are other things are work here. I don't think you're going to get a TR to be "100% height" nomatter what you do to it.

Myself, -instead of using TABLEs, I go all-CSS. I see you have some DIVs already (so 'transitional' I assume?). The changeover to complete non-tables (except for truly tabular data) takes time I know... now, I stand behind my computer chair in terror, looking at people's posted code through my fingers... wondering how I ever learned that and why I ever thought that this was the only & best way to make web pages...

**letsgetsilly** · 06-12-2007 06:44 AM

If you show me how to make a webpage that looks the same on all browsers using div's I'd be more than happy. The reason I resort to tables is that they seem to have the most consistent cross browser implementation.

Getting a footer to stick in IE or IE7 is awful.

**ray326** · 06-12-2007 05:12 PM

make a webpage that looks the same on all browsers

For starters, that ain't gonna happen in general.

Thread: 100% table height HTML/CSS with XHTML Transitional

Thread Tools

Display

100% table height HTML/CSS with XHTML Transitional

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions