www.webdeveloper.com
Results 1 to 4 of 4

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

  1. #1
    Join Date
    Jun 2006
    Posts
    38

    100% table height HTML/CSS with XHTML Transitional

    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>

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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...
    Last edited by WebJoel; 06-11-2007 at 06:09 PM.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Jun 2006
    Posts
    38
    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.

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    make a webpage that looks the same on all browsers
    For starters, that ain't gonna happen in general.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles