(Apologies for the title, but that's about how I feel right now.)
I've recently been given the… opportunity… to completely redesign the layout of a web site I support. In the interest of keeping my CSS simple and my HTML semantic, I decided to use a modified version of the "holy grail" layout (the main difference is moving the right column inside the center column, which simplifies things even further, and making the center column fixed-width).
After a negligible amount of fiddling, I had the new layout working in FF3, Chrome, and Opera, which meant it was time to fire up IE6. Predictably, the layout breaks (the left column was missing entirely). However, I didn't expect it to break quite so spectacularly — I seem to have triggered some kind of rendering bug in IE6 which I can neither isolate nor eliminate.
When adapting the holy grail layout, I had initially omitted the IE6-specific hack it uses, at it isn't (shouldn't be?) needed with the modifications I've made to the right column, as it accounts for that column's width, which doesn't appear at the same level in my layout. Still, adding it back in was my first guess, but it turned out to require a very strange number (246px, which doesn't appear anywhere else in the stylesheet), so I tried resizing the window to make sure it wasn't related to page size. Much to my surprise, the column then leapt ~1000 pixels to the right, well beyond the edge of the page.
Going back and removing the IE6 hack, the same behavior occurs when resizing, only instead of leaping from the left-hand side of the layout off of the page, it appears out of nowhere at the right-hand side of the layout. I've monkeyed with every part of the layout which seems even remotely related and Googled up all the IE6 rendering bugs I know of, but can't seem to eliminate the jump-on-page-resize behavior.
Has anyone seen this bug before, if bug it is? Complete code follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Modified grail layout</title>
<style type="text/css">
* {
border: 0;
margin: 0;
padding: 0;
}
#main {
background: white;
overflow: auto;
padding-left: 180px;
}
#content {
background: #dfd;
float: left;
padding: 10px 10px 0;
width: 800px;
}
#left {
background: #ccc;
float: left;
margin-left: -100%;
position: relative;
padding: 10px 10px 0;
right: 180px;
width: 160px;
}
#right {
background: #fdd;
float: right;
margin-bottom: 10px;
padding: 10px 10px 0;
width: 160px;
}
#top {
margin: 0 auto;
width: 1000px;
}
body {
background: #ddf;
}
/* fake content */
#cc1 {
height: 320px;
width: 800px;
}
#cc2 {
height: 320px;
margin-right: 190px;
}
#cc3 {
height: 160px;
margin-right: 190px;
}
#lc1 {
height: 120px;
margin-left: auto;
margin-right: auto;
width: 144px;
}
#lc2 {
height: 300px;
width: 160px;
}
#lc3 {
height: 400px;
width: 160px;
}
#rc1 {
height: 400px;
width: 160px;
}
#rc2 {
height: 300px;
width: 160px;
}
div.fake-content {
background: #666;
color: white;
margin-bottom: 10px;
}
/* Internet Explorer (all) */
#ie body {
text-align: center;
}
#ie #left {
text-align: center;
}
#ie #left * {
text-align: left;
}
#ie #right {
margin-bottom: 0;
}
#ie #top {
text-align: left;
}
/* Internet Explorer 6 */
#ie6 #left {
left: 246px; /* WTF!? */
}
</style>
</head>
<body>
<!--[if IE 6]><div id="ie"><div id="ie6"><![endif]-->
<!--[if IE 7]><div id="ie"><div id="ie7"><![endif]-->
<!--[if IE 8]><div id="ie"><div id="ie8"><![endif]-->
<div id="top">
<div id="main">
<div id="content">
<div id="cc1" class="fake-content">cc1</div>
<div id="right">
<div id="rc1" class="fake-content">rc1</div>
<div id="rc2" class="fake-content">rc2</div>
</div>
<div id="cc2" class="fake-content">cc2</div>
<div id="cc3" class="fake-content">cc3</div>
</div>
<div id="left">
<div id="lc1" class="fake-content">lc1</div>
<div id="lc2" class="fake-content">lc2</div>
<div id="lc3" class="fake-content">lc3</div>
</div>
</div>
<p id="footer">©2009 Blah blah blah</p>
</div>
<!--[if IE]></div></div><![endif]-->
</body>
</html>