PDA

Click to See Complete Forum and Search --> : 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!



<!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... :o
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 browsersFor starters, that ain't gonna happen in general.