Hi,
This an old IE bug and is evident in IE6 also. IE just doesn't like it when absolute elements come before static content in the html and it gets everything wrong and in some cases won't even show the absolute element.
The solution is to move the absolute element to the end of the current stacking context.
e.g.
Code:
<body>
<div id="DocBody">
<h2>This is a heading</h2>
<p>This is some text</p>
</div>
<div id="DocHeader"> </div>
</body>
That will work straight away and give you the look you want.
If you don't want to move the html there are 2 other things that will work. You could float #DocBody and then the top margin won't collapse because margins on floats never collapse.
Perhaps the simplest solution of all though is simply to use padding top instead of margin top as padding never collapses either. You don't need to change anything else.
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>
<title>Test Page</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">
#DocHeader
{
position: absolute;
}
#DocBody
{
padding-top: 234px;
width: 800px;
}
</style>
</head>
<body>
<div id="DocHeader"></div>
<div id="DocBody">
<h2>This is a heading</h2>
<p>This is some text</p>
</div>
</body>
</html>
Originally Posted by Dan Schulz
Bookmarks