Iceddante
11th June 07, 03:21 AM
I have a fixed div that is supposed to reside on the left side of the page and remain static using fixed positioning. There is another div adjacent to it that has a margin property that ensures it remains shifted to the right of my fixed element.
This looks fine in Firefox and Opera, but in IE7 the fixed element seems to 'inherit' somehow the margin of the adjacent element and positions itself relative to it, so that they share the same left margin. Any repositioning of the fixed element is relative to its adjacent node.
Here is the code (or check out http://lnwdeveloper.com/lnw/tst/test.html for an online version of the page):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
#container {
border: 2px solid red;
min-height: 900px;
}
/* The fixed element is supposed to appear on the left */
#floater {
position: fixed;
background: yellow;
}
/* The right side (via margin) appears 280px to the right */
#bodyContent{
background-color: #ffeeb4;
margin: 0px 0px 0px 280px;
width: 100px;
}
#container > * {
border: 2px solid #963;
}
</style>
</head>
<body>
<div id="container">
<!-- In IE 7, the following div shifts with the bodyContent node by some bug -->
<div id="floater">
I should be on the left side of the screen<br />
Test 1<br />Test 1<br />Test 1<br />Test 1<br />Test 1<br />Test 1<br />
</div>
<div id="bodyContent">
I have a left margin of 280 pixels.<br />
Yo its the content here, blah blah blah.<br /> Yo its the content here, blah blah blah.<br />
</div>
</div>
</body>
</html>
Note that this is not specific to elements with position: fixed because if I change the position to absolute the problem is still there.
I've found two solutions to this problem, neither of which is valid for me: Moving the floater element's html to after the bodyContent node html prevents the inheritance, and using absolute positioning on bodyContent fixes the bug (though the element no longer takes up space in its container element which is what I need).
I haven't tested this in IE6 but I'm guessing you find similar behavior there.
Has anyone else experienced this? Know any other workarounds?
This looks fine in Firefox and Opera, but in IE7 the fixed element seems to 'inherit' somehow the margin of the adjacent element and positions itself relative to it, so that they share the same left margin. Any repositioning of the fixed element is relative to its adjacent node.
Here is the code (or check out http://lnwdeveloper.com/lnw/tst/test.html for an online version of the page):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
#container {
border: 2px solid red;
min-height: 900px;
}
/* The fixed element is supposed to appear on the left */
#floater {
position: fixed;
background: yellow;
}
/* The right side (via margin) appears 280px to the right */
#bodyContent{
background-color: #ffeeb4;
margin: 0px 0px 0px 280px;
width: 100px;
}
#container > * {
border: 2px solid #963;
}
</style>
</head>
<body>
<div id="container">
<!-- In IE 7, the following div shifts with the bodyContent node by some bug -->
<div id="floater">
I should be on the left side of the screen<br />
Test 1<br />Test 1<br />Test 1<br />Test 1<br />Test 1<br />Test 1<br />
</div>
<div id="bodyContent">
I have a left margin of 280 pixels.<br />
Yo its the content here, blah blah blah.<br /> Yo its the content here, blah blah blah.<br />
</div>
</div>
</body>
</html>
Note that this is not specific to elements with position: fixed because if I change the position to absolute the problem is still there.
I've found two solutions to this problem, neither of which is valid for me: Moving the floater element's html to after the bodyContent node html prevents the inheritance, and using absolute positioning on bodyContent fixes the bug (though the element no longer takes up space in its container element which is what I need).
I haven't tested this in IE6 but I'm guessing you find similar behavior there.
Has anyone else experienced this? Know any other workarounds?