Log in

View Full Version : [CSS] Fixed position crossbrowser: addition


molendijk
05-23-2008, 01:01 AM
1) CODE TITLE: Fixed position crossbrowser: addition

2) AUTHOR NAME/NOTES: Arie Molendijk

3) DESCRIPTION: Emulating 'position: fixed' in IE with IE-expressions that are inherently mode-independent.

4) INFO: After writing these pages (http://www.dynamicdrive.com/forums/showthread.php?t=31661&highlight=molendijk) on emulating 'position: fixed' in IE I found a method for fixing elements (with the help of IE-expressions) that does not require checking the mode (quirks or standard) of the page. It must be preferred to what I proposed on the above link, because it's simpler. Both document.body and document.documentElement can indeed be replaced with offsetParent.
Css:

.X (for class) or #X (for unique ID) {
position: absolute;
top: expression(offsetParent.scrollTop + some_value_1 + 'px');
left: expression(offsetParent.scrollLeft + some_value_2 + 'px');
}

If we want the element to be fixed at the bottom of the page, for instance, we write:
top: expression(offsetParent.scrollTop -3 + (offsetParent.clientHeight-this.clientHeight) +'px' );
(The small negative number is needed to avoid endless scrolling).
---
Arie Molendijk
molendijk
05-23-2008, 01:14 PM
Edit: sorry, what I wrote first doesn't hold any more, because I modified the post above.
---
Arie.
jscheuer1
08-02-2008, 09:57 AM
That's actually not as effective though. If you have nested elements the offsetParent may be one of the element's more immediate containing elements, if so - the math and/or the actually positioning (visa vis appearing fixed) may not work out as well.

With certain types of nesting even going directly for the body/documentElement will not work out the same as position:fixed; does in the browsers that support it. But it will be more accurate than the offsetParent method you've just outlined, which can fail to fix the element at all, while the body/documentElement method will at least still fix the element, just not in the location that corresponds to where it would be in a browser supporting fixed positioning. Adjustments can be made (interestingly enough, also involving the offsetParent would be one way) so that it does, not so with offsetParent alone.

Consider trying to mimic the fixed positioning here:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.X {
position:fixed;
top:0;
left:100px;
}
</style>
</head>
<body>
<div>
More
</div>
<div>
Lo
<div style="position:relative;">
<table>
<tr>
<td><div class="X">
Hi
</div></td>
</tr>
</table>

</div>
</div>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
<p>something</p>
</body>
</html>
molendijk
08-11-2008, 07:51 PM
Thanks, John (I just returned from a holiday and found your comment).
It appears that the offsetParent-method doesn't work if it's done in the scope of 'position absolute' or 'position: relative'. If that's the case, then we should just put the elements we want to 'fix' in IE<7 outside those positions.
===
Arie.