Internet Explorer percent based layout issue
- by Tom
Heya,
My goal is to make a layout that is 200% width and height, with four containers of equal height and width (100% each), using no javascript as the bear minimum (or preferably no hacks).
Right now I am using HTML5, and CSS display:table. It works fine in Safari 4, Firefox 3.5, and Chrome 5. I haven't tested it yet on older versions.
Nonetheless, in IE7 and IE8 this layout fails completely. (I do use the Javascript HTML5 enabling script /cc../, so it should not be the use of new HTML5 tags)
Here is what I have:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<title>IE issue with layout</title>
<style type="text/css" media="all">
/* styles */
@import url("reset.css");
/* Generall CSS */
.table
{
display:table;
}
.row
{
display:table-row;
}
.cell
{
display:table-cell;
}
/* Specific CSS */
html, body
{
//overflow:hidden; I later intend to limit the viewport
}
section#body
{
position:absolute;
width:200%;
height:200%;
overflow:hidden;
}
section#body .row
{
width:200%;
height:50%;
overflow:hidden;
}
section#body .row .cell
{
width:50%;
overflow:hidden;
}
section#body .row .cell section
{
display:block;
width:100%;
height:100%;
overflow:hidden;
}
section#body #stage0 section header
{
text-align:center;
height:20%;
display:block;
}
section#body #stage0 section footer
{
display:block;
height:80%;
}
</style>
</head>
<body>
<section id="body" class="table">
<section class="row">
<section id="stage0" class="cell">
<section>
<header>
<form>
<input type="text" name="q" />
<input type="submit" value="Search" />
</form>
</header>
<footer>
<table id="scrollers">
</table>
</footer>
</section>
</section>
<section id="stage1" class="cell">
<section>
content
</section>
</section>
</section>
<section class="row">
<section id="stage2" class="cell">
<section>
content
</section>
</section>
<section id="stage3" class="cell">
<section>
content
</section>
</section>
</section>
</section>
</body>
</html>
You can see it live here: http://www.tombarrasso.com/ie-issue/
