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 [[email protected]]
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/
