Forum Moderators: open
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>
No offence, but have you tried not using table based layout?
More use of CSS in header will also often be more helpful than embedded into the tag.
Sorry but don't think there is a way round this.
If you cannot tell the table that it should be 100% setting the TD to be 100% has no effect as the TD will only set itself to 100% of the table height (which cannot be set).
You can obviously set the TD hight in pxels but that's not really what your looking for.
So in conclusion if you need to use DOCTYPE, the you cannot have a table that is 100% in height.
Does that not then make the DOCTYPE statement invalid..?!?!?!?
