White Stormy
Take that, subspace!
http://halefx.com/temp/temp.html
validates css3 (and css2) and xhtml strict.. works fine in FF, Chrome, Safari, Opera, IE7/8.. but I gotta have it work in IE6, and it doesn't.
Any ideas how I can fix this with conditional CSS?
IE6- incorrect, and unpredictable.
IE8- correct
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
/**
* CSS properties to apply to all elements
*/
* {
color: #ffffff;
margin: 0;
padding: 0;
}
/**
* CSS properties to apply to standard XHTML tags. Tags listed in alphabetical order.
*/
body {
border: 0;
font: x-small arial, helvetica, clean, sans-serif;
}
/**
* CSS properties to apply to custom classes. Classes listed in alphabetical order by parent.
*/
.center {
margin: 0 auto;
}
.section {
clear: both;
overflow: hidden;
}
.stuff {
padding: 0.5em;
}
.tidy {
margin-bottom: -100% ! important;
padding-bottom: 100% ! important;
}
/**
* CSS properties to apply to custom IDs and their child elements. IDs listed in alphabetical order.
*/
#container {
background-color: #660000;
margin: 0 auto;
width: 76em;
}
#footer {
background: gray;
}
#header {
background: orange;
}
#left {
background-color: #000066;
float: left;
width: 18em;
}
#main {
background-color: #660066;
float: left;
width: 100%;
}
#nav-top {
background: yellow;
}
#nav-top a {
color: red;
cursor: pointer;
display: block;
padding: 0.5em 4em;
text-align: center;
}
#nav-top a:hover {
background-color: red;
color: green;
text-decoration: underline;
}
#nav-top ul {
list-style: none;
margin: 0 auto;
}
#nav-top ul li {
float: left;
}
#right {
background-color: #006600;
float: right;
width: 18em;
}
/**
* CSS properties for column variables.
*/
#main.cols-2 { width: 58em; }
#main.cols-3 { width: 40em; }
</style>
<!--[if IE 6]>
<style type="text/css">
</style>
<![endif]-->
<title>HaleFx 1/2/3 Column Theme</title>
</head>
<body>
<div id="container">
<div id="header" class="section stuff">
<img alt="logo" height="180" src="logo.png" style="float: left;" title="logo" width="160" /><h1>Header</h1>
</div>
<div id="nav-top" class="section">
<div class="center">
<ul>
<li><a>Nav</a></li>
<li><a>Nav</a></li>
<li><a>Nav</a></li>
<li><a>Nav</a></li>
<li><a>Nav</a></li>
</ul>
</div>
</div>
<div class="section">
<div id="left" class="tidy">
<div class="stuff">
Left Left Left<br />
Left Left Left<br />
Left Left Left<br />
Left Left Left<br />
Left Left Left<br />
Left Left Left<br />
Left Left Left<br />
Left Left Left<br />
Left Left Left<br />
</div>
</div>
<div id="main" class="cols-3 tidy">
<div class="stuff">
Main Main Main<br />
Main Main Main<br />
</div>
</div>
<div id="right" class="tidy">
<div class="stuff">
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
Right Right Right<br />
</div>
</div>
</div>
<div id="footer" class="section stuff">
Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer..
</div>
</div>
</body>
</html>
validates css3 (and css2) and xhtml strict.. works fine in FF, Chrome, Safari, Opera, IE7/8.. but I gotta have it work in IE6, and it doesn't.
Any ideas how I can fix this with conditional CSS?
IE6- incorrect, and unpredictable.

IE8- correct
