SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member crazyfool's Avatar
    Join Date
    Jan 2004
    Location
    earth
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    doctypes and percentage table layouts..

    howzit,

    i have a question regarding table layouts *duck*
    the site makes use of percentages to resize accordingly. here is the code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    html, body {
    	padding:0;
    	margin:0;
    	color: #000;
    }
    </style>
    </head>
    
    <body>
    <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td height="74" colspan="2" style="background:#00ff00;padding:5px;">Header Content</td>
    </tr>
    <tr>
        <td width="10%" style="background:#000;" valign="top">
    		<table style="color:#fff;" width="129" cellspacing="0" cellpadding="0" border="0">
    		<tr>
    		    <td>Nav Link 1</td>
    		</tr>
    		</table>
    	</td>
        <td width="90%" style="background:#eff1f5;padding:5px;" valign="top">Main Content Area</td>
    </tr>
    <tr>
        <td height="21" colspan="2" style="background:#0000ff;color:#fff;padding:5px;" align="center">Footer Content</td>
    </tr>
    </table>
    </body>
    </html>
    it works in IE, Opera, Firebird but in netscape the site is all over the place. does netscape not recognise percentage values for height? is there a way around this problem? also, the page renders fine in IE, Opera, Firebird when I am using the following DOCTYPE:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    but the minute I put in:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    which looks like the same html version to me..??? or
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    it no longer stretches the full height of the browser window in IE, Opera or Firebird...? why is this happening please? can anyone explain?

    thanks

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I assume what you were really asking; why is the table not occupying 100% height of your browser window, that answer is; it is not meant to... 100% is relational to the contents not the canvas.

  3. #3
    SitePoint Member crazyfool's Avatar
    Join Date
    Jan 2004
    Location
    earth
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder
    I assume what you were really asking; why is the table not occupying 100% height of your browser window, that answer is; it is not meant to... 100% is relational to the contents not the canvas.
    Although duly noted, your answer doesn't help me very much.
    If the table is relational to the contents and not the canvas, then why does it stretch to the full WIDTH of the browser window?
    I am trying to create a cross browser table layout which adjusts when the browser is resized. ie the footer remains at the base of the browser windows as the window is resized.
    Basically a table based version of this CSS layout by Paul 'O Brien:
    http://www.pmob.co.uk/temp/3colfluidtest_4.htm

    Can it be done with tables and more specifically, can it be done using DTD: XHTML 1.0 Transitional?

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The canvas height scrolls to infinity and beyond (hence vertical scrollbars) unless you use a CSS hack of 100% height for the <html> and <body> elements; width however can be calculated.

  5. #5
    SitePoint Member crazyfool's Avatar
    Join Date
    Jan 2004
    Location
    earth
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. I have tried using html, body{height:100%;} along with tables to achieve the layout but with no luck. The goal is to have a fixed 20px header and footer and a resizing centercontent area which adjusts with the height of the browser. I was just wondering if it could be accomlished using just tables...

    oh well, thanks for the replies


Bookmarks

Posting Permissions

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