SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Cape Town
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 fluid layout with tables

    I am having a problem trying to get this page to work properly in IE6.
    The requirement is for a table layout, which is XHTML transitional.

    I'd like to have the page stretch 100% of the viewport (vertically) and the header and footer to remain at the top and bottom at all times. I set the height of the main content area to 90% so that it would 'push' the header and footer against the borders but in IE6, it seems to be setting it to exactly 90% of the current viewport, then adding the fixed heights.

    Here is the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
    <head>
    <title></title>
    <style type="text/css">
    
    html, body { height:100%; }
    
    body {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	color: #fff;
    	text-align: center;
    	font: 11px Arial, Verdana,  Helvetica, Sans-Serif;
    }
    
    .container {
    	width: 652px;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: left;
    	height: 100%;
    	min-height: 100%;
    }
    
    a { color: #fff; }
    
    td { font-size: 11px; }
    
    .header {
    	vertical-align: bottom;
    	padding-bottom: 8px;
    	background: #fff;
    	height: 119px;
    	text-align: center;
    	border-right: 1px solid #c3c3c3;
    	border-left: 1px solid #c3c3c3;
    }
    
    .nav {
    	background: #18324b;
    	font-family: Verdana, Arial;
    }
    
    .nav a { text-decoration: none; }
    
    .navitem {
    	font-size: 10px;
    	text-align: center;
    	border-right: 1px solid #39648a;
    }
    
    .maincontent {
    	background: #203d58;
    	
    	vertical-align: top;
    }
    
    .vline { color: #203d58; }
    
    .footer {
    	vertical-align: top;
    	background: #315d84;
    	height: 148px;
    	font-size: 10px;
    }
    
    .footer a { text-decoration: none; }
    
    </style>
    <script type="text/javascript">
    // changes cell background colour for navigation
    function doMouseOver(item) {
    	// set your navigation rollover hex code here
    	item.style.background="#39648a";
    }
    function doMouseOut(item) {
    	item.style.background="#18324b";
    }
    </script>
    </head>
    
    <body>
    <table class="container" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td colspan="9" class="header">&nbsp;</td>
    </tr>
    <tr class="nav">
    	<td class="navitem" colspan="2" style="background: #39648a;height: 22px;"><a accesskey="" title="" tabindex="" href="">Nav 1</a></td>
    	<td class="navitem" onmouseover="doMouseOver(this);" onmouseout="doMouseOut(this);"><a accesskey="" title="" tabindex="" href="">Nav 2</a></td>
    	<td class="navitem" onmouseover="doMouseOver(this);" onmouseout="doMouseOut(this);"><a accesskey="" title="" tabindex="" href="">Nav 3</a></td>
    	<td class="navitem" onmouseover="doMouseOver(this);" onmouseout="doMouseOut(this);"><a accesskey="" title="" tabindex="" href="">Nav 4</a></td>
    	<td class="navitem" onmouseover="doMouseOver(this);" onmouseout="doMouseOut(this);"><a accesskey="" title="" tabindex="" href="">Nav 5</a></td>
    	<td class="navitem" onmouseover="doMouseOver(this);" onmouseout="doMouseOut(this);"><a accesskey="" title="" tabindex="" href="">Nav 6</a></td>
    	<td colspan="2"></td>
    </tr>
    <tr>
    	<td colspan="9" style="height: 32px;background: #39648a;">&nbsp;</td>
    </tr>
    <tr>
    	<td style="background: #142d4a;"></td>
    	<td colspan="7" class="maincontent" style="height: 90%;">
    		<!-- IE6 does not like the 90% -->
    		&nbsp;
    	</td>
    	<td style="background: #142d4a;"></td>
    </tr>
    <tr>
    	<td style="height: 1px;width: 13px;"></td>
    	<td style="width: 42px;"></td>
    	<td style="width: 69px;"></td>
    	<td style="width: 67px;"></td>
    	<td style="width: 74px;"></td>
    	<td style="width: 70px;"></td>
    	<td style="width: 74px;"></td>
    	<td style="width: 230px;"></td>
    	<td style="width: 13px;"></td>
    </tr>
    <tr>
    	<td style="background: #1e446e;"></td>
    	<td colspan="7" class="footer"></td>
    	<td style="background: #1e446e;"></td>
    </tr>
    </table>
    </body>
    </html>
    Any help or adviced would be appreciated.

    Thanks.
    Brett Reid
    Web Application Developer

  2. #2
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Cape Town
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Managed to find a solution. Similar problem here:
    http://www.sitepoint.com/forums/show...hreadid=206057
    Brett Reid
    Web Application Developer


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
  •