dcsimg
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 07:09 PM.

  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.

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