Forum Moderators: not2easy
That was before even IE7, but I always believed it would be no use as it couldn't work in IE6 without being in quirks mode and I had no wish to promote anything that still needed quirks mode in IE7.
However taking another look at it today because of the mail I got, I realised loads of things and learned another (maybe useful going forward?) trick.
1. no-one cares about O6 or IE5/Mac anymore..
2. IE8 now supports Table properties
3. IE 7 & 8 support min-height so the IE heights hacks need only be fed to IE6
4. I have now learned to use conditionals instead of hacks ;)
5. IE8 also now supports the box-sizing property [w3.org] A CSS3 property without the -ms-prefix (imagine if we tried to make you use something with an ms prefix ;))
6. if IE6 & 7 are in quirks mode you can get other browsers to act the same by using the afore mentioned CSS box-sizing property though they may require a little prefix help
lastly: it is/was always possible to put IE7 into quirks mode, it just didn't happen with the existing <xml prolog> thingie used in the previous code.. you simply need to put a comment, any comment, before the Doctype instead
What I learned...
it is possible to put IE7 into quirks mode without IE8 trying to go into its 'special' IE7 mode (and no this is not the emulation mode)
IE state that they use the Doctype to determine the compatibility mode for IE8, if no emulation mode is specified.
EmulateIE8 mode is similar to EmulateIE7 mode; Internet Explorer uses the <!DOCTYPE> directive to determine how to render content; however, standards mode directives are displayed in Internet Explorer 8 Standards mode. Quirks mode directives are displayed in IE5 mode.
So that's OK.. we know that but we also know that IE doesn't quite always get it right, so what if you hide the (IE only part of the) "quirky" part of the Doctype from IE8? - I tried it it works :) Good ol' Conditional comments
so after all that, and you're still here, I believe we may have a workable template. The disclaimer is that of course this is still not real world tested. the giveaway I can give is that quirks mode box model can now be handled using the various box-sizing properties prefixed or not, and as long as you put the real (per CSS3 spec) box-sizing rule last you should be OK
and here's the re-written code taking in todays environment:
sorry for the length (although it's actually shorter than the last one!) but I tried to take in every eventuality, if I haven't quite managed then do please let me know!
<!--[if lt IE 8]><!-- IE6 & 7 quirks mode --><![endif]-->
<!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" xml:lang="en" ><head>
<title>3 Column CSS Layout - Fixed Header and Footer</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body {height: 100%; width: 100%; margin: 0; padding: 0; border: 0;}/**** some general formatting styles **********/
body{font-size: 0.8em; font-family: verdana, tahoma, arial, sans-serif;}a {
color: #fff;
background: transparent;
text-decoration: underline;
}a:hover {color: lime;}
.tablecell a {color: #009;}
.tablecell a:hover {
color: #fff;
background: #009;
text-decoration: none;
}ul {padding-right: 0.5em;}
p {margin: 0;}
.two p {line-height: 4;}
h1, h2, h3 {font-family: georgia; padding: 0; margin: 0.5em 2em;}
h1 {font-size: 1.2em;}
h2 {font-size: 1.1em;}
h3 {font-size: 1em;}
/*** end general ***/.thetable {
position: relative;
display: table;
width: 100%;
height: 100%;
}.tablerow {display: table-row;}
.tablecell{
display: table-cell;
border: 0;
padding: 100px 0 50px 0;
margin: 0;
vertical-align: top;
height: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}.one{
width: 180px;
background: violet;
position: relative;
border-right: 1px dotted #000;
z-index: 5;
}.two{
width: auto;
background: yellow;
position: relative;
}.two .pad {
padding-left: 20px;
padding-right: 20px;
}.three{
width: 200px;
background: lime;
position: relative;
border-left: 1px dotted #000;
}#header{
position: absolute;
background: #000080;
width: 100%;
height: 100px;
color: #fff;
z-index: 10;
border-bottom: 2px dotted lime;-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}#footer{
margin-top: -40px;
width: 100%;
background: #000080;
color: white;
min-height: 40px; /* IE lt 7 needs height though */
position: absolute;
z-index: 100;
}
</style><!--[if lt IE 8]>
<style type="text/css" media="screen">.thetable, .tablerow {display: block;}
.tablecell {float: left;}/* middle cell adjustments for IE floats */
.two {
width: 100%;
margin-left: -180px;
margin-right: -200px;
padding-left: 200px;
padding-right: 220px;
}/* added, using the * html hack to overcome min-height rules in IE 6 and below */
* html .tablecell {height: 100%;}
* html #footer{height: 40px;}
</style>
<![endif]--></head>
<body>
<div id="header"><h1>3 Column CSS Layout <span>a work in progress»</span></h1>
</div>
<div class="thetable">
<div class="tablerow">
<div class="tablecell one"><div class="pad">
<p>CSS - 100% Height layout.</p>
<ul>
<li>three column stretch</li>
<li>fixed height header and footer</li>
<li>footer spans 3 columns</li>
</ul>
<p><a href="#">test link</a></p>
</div></div>
<div class="tablecell two"><div class="pad">
<h2>Middle Column</h2>
<p>This is a flexible width column, in IE6/7 it is the width of the screen and clearance of the side columns in <strong>IE</strong> is produced by <em>extra left and right padding</em>.</p><p>add in lots of foo text to see columns stretch, and footer move down</p>
<!--
<p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p>
<p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p>
--></div></div>
<div class="tablecell three"><div class="pad">
<p>This version is done using IE conditional CSS.</p>
<p>IE6 & 7 Quirks still required - trigger with a comment before the Doctype</p>
</div></div>
<!-- tablerow --></div>
<!-- thetable --></div>
<div id="footer"><!--<p>and this of course is the footer</p>--></div>
</body>
</html>
Updates:
2. removed a typo that caused a code error when pasted
1. took out a tester part of the code(an x before the box-sizing property), sorry it got left in after last test
[edited by: SuzyUK at 10:03 am (utc) on July 12, 2009]
