The following test case is a simplified version of a layout I am working on. There are four child elements of body, the first (blue) is absolutely positioned at the bottom of the viewport, the last (green) is absolutely positioned at the top of the viewport, the second (yellow) is a hack (a floated element with a negative margin-bottom) to vertically center the third (red).
In IE 6 the first element which should be blue and at the bottom of the viewport does not seem to be rendered at all. At first I thought it was being rendered off screen, but a simple javascript function (which I have included but commented out) suggests it isn't be drawn at all. IE 7 is even stranger. On first loading the page the element in question is drawn, but then isn't if you refresh the page. I could reproduce that behaviour consistently. The page displays as intended in Firefox, Safari, Opera, Chrome and IE8. If you set the float property to "none" for #spacer the problem goes away, but then the vertical centering does not behave as I would want. Any suggestions for what the underlying bug here is? I'm not sure I've seen this one before. Here's the file: <!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" lang="en"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <style type="text/css" media="screen"> html, body { height: 100%; margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #fff; background-color: #000; } h1 { bottom: 0; height: 48px; background-color: blue; } h1, #footer { position: absolute; left: 0; z-index: 2000; margin: 0; padding: 14px 0; width: 100%; text-align: center; } #spacer { display: block; float: left; margin: 0; border: none; padding: 0; width: 100%; height: 50%; margin-bottom: -305px; background-color: yellow; } #content { clear: both; position: relative; z-index: 1000; margin: 0 auto; width: 960px; height: 570px; background-color: red; } #footer { top: 0; height: 12px; font-size: 10px; list-style-type: none; background-color: green; } </style> <script type="text/javascript"> // Uncomment the following for some basic diagnostic info // window.onload = function() { // var logo, logoX, logoY; // logo = document.getElementById('logo'); // function getX(e) { // var x = 0; // while (e) { // x += e.offsetLeft; // e = e.offsetParent; // } // return x; // } // function getY(e) { // var y = 0; // while (e) { // y += e.offsetTop; // e = e.offsetParent; // } // return y; // } // logoX = getX(logo); // logoY = getY(logo); // alert('h1#logo is at: x = ' + logoX + ', y = ' + logoY); // } </script> </head> <body> <h1 id="logo"> <!-- A logo would go here normally but isn't necessary for the test case --> </h1> <div id="spacer"><!-- Hack for vertical centering --></div> <div id="content"> Foo </div> <ul id= "footer"> <!-- A list of links goes here but isn't necessary for the test case --> </ul> </body> </html> ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/