looking at rlemons' code and the link weazel gave it looks like he's been there already ;)
if you notice that if you collapse the browser in IE on that page the menu box moves with the horizontal scroll.
I've nmessed around with fixed in IE a bit but never tried what your trying to do. It appears it can't be done without javascript. Vertically no problem but...
you can try this if you want (not CSS but works)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=UTF-8" />
<title> testing CSS Poisitioning </title>
<script type="text/javascript">
// fixed.js: fix fixed positioning and fixed backgrounds in IE/Win
// version 1.8, 08-Aug-2003
// written by Andrew Clover
<and@doxdesk.com>, use freely
/*@cc_on
@if (@_win32 &&
@_jscript_version>4)
var fixed_positions= new Array();
var
fixed_backgrounds= new Array();
var fixed_viewport;
//
Initialisation. Called when the <body> tag arrives. Set up viewport
so the
// rest of the script knows we're going, and add a measurer
div, used to detect
// font size changes and measure image sizes for
backgrounds later
function fixed_init() {
fixed_viewport=
(document.compatMode=='CSS1Compat') ?
document.documentElement :
document.body;
var el= document.createElement('div');
el.setAttribute('id', 'fixed-measure');
el.style.position=
'absolute';
el.style.top= '0'; el.style.left= '0';
el.style.overflow= 'hidden'; el.style.visibility= 'hidden';
el.style.fontSize= 'xx-large'; el.style.height= '5em';
el.style.setExpression('width', 'fixed_measureFont()');
document.body.insertBefore(el, document.body.firstChild);
}
//
Binding. Called every time an element is added to the document,
check it
// for fixed features, if found add to our lists and set
initial props
function fixed_bind(el) {
var needLayout=
false;
var tag= el.tagName.toLowerCase();
var st= el.style;
var cst= el.currentStyle;
var anc;
// find fixed-position
elements
if (cst.position=='fixed') {
needLayout= true;
fixed_positions[fixed_positions.length]= el;
// store original
positioning as we'll overwrite it
st.position= 'absolute';
st.fixedPLeft= cst.left;
st.fixedPTop= cst.top;
st.fixedPRight= cst.right;
st.fixedPBottom= cst.bottom;
st.fixedPWidth= fixed_parseLength(cst.width);
st.fixedPHeight=
fixed_parseLength(cst.height);
// find element that will act as
containing box, for convenience later
st.fixedCB= null;
for
(anc= el; (anc= anc.parentElement).parentElement;) {
if
(anc.currentStyle.position!='static') {
st.fixedCB= anc;
break;
} }
// detect nested fixed positioning (only
ancestor need move)
st.fixedNest= false;
for (anc= el; anc=
anc.parentElement;) {
if (anc.style.fixedNest!=null)
st.fixedNest= true;
break;
}
}
// find
fixed-background elements (not body/html which IE already gets
right)
if (cst.backgroundAttachment=='fixed' && tag!='body' &&
tag!='html') {
needLayout= true;
fixed_backgrounds[fixed_backgrounds.length]= el;
// get
background offset, converting from keyword if necessary
st.fixedBLeft= fixed_parseLength(cst.backgroundPositionX);
st.fixedBTop= fixed_parseLength(cst.backgroundPositionY);
// if
it's a non-zero %age, need to know size of image for layout
if
(st.fixedBLeft[1]=='%' || st.fixedBTop[1]=='%') {
st.fixedBWidth= 0; st.fixedBHeight= 0;
fixed_measureBack(el);
}
}
if (needLayout) fixed_layout();
}
// Layout. On every
window or font size change, recalculate positioning
// Request
re-layout at next free moment
var fixed_delaying= false;
function
fixed_delayout() {
if (fixed_delaying) return;
fixed_delaying=
true;
window.setTimeout(fixed_layout, 0);
}
var fixed_ARBITRARY=
200;
function fixed_layout() {
fixed_delaying= false;
if
(!fixed_viewport) return;
var i, el, st, j, pr, tmp, A= 'auto';
var cb, cbLeft, cbTop, cbRight, cbBottom, oLeft, oTop, oRight,
oBottom;
var vpWidth=fixed_viewport.clientWidth,
vpHeight=fixed_viewport.clientHeight;
// calculate initial
position for fixed-position elements [black magic]
for (i=
fixed_positions.length; i-->0;) {
el= fixed_positions[i]; st=
el.style;
// find positioning of containing block
cb=
st.fixedCB; if (!cb) cb= fixed_viewport;
cbLeft=
fixed_pageLeft(cb); cbTop= fixed_pageTop(cb);
if
(cb!=fixed_viewport) { cbLeft+= cb.clientLeft; cbTop+= cb.clientTop;
}
cbRight= fixed_viewport.clientWidth-cbLeft-cb.clientWidth;
cbBottom= fixed_viewport.clientHeight-cbTop-cb.clientHeight;
//
if size is in %, must recalculate relative to viewport
if
(st.fixedPWidth[1]=='%')
st.width=
Math.round(vpWidth*st.fixedPWidth[0]/100)+'px';
if
(st.fixedPHeight[1]=='%')
st.height=
Math.round(vpHeight*st.fixedPHeight[0]/100)+'px';
// find out
offset values at max size, to account for margins
st.left= A;
st.right= '0'; st.top= A; st.bottom= '0';
oRight=
el.offsetLeft+el.offsetWidth; oBottom=
el.offsetTop+el.offsetHeight;
st.left= '0'; st.right= A; st.top=
'0'; st.bottom= A;
oLeft= el.offsetLeft; oTop= el.offsetTop;
// use this to convert all edges to pixels
st.left= A; st.right=
st.fixedPRight;
st.top= A; st.bottom= st.fixedPBottom;
oRight-= el.offsetLeft+el.offsetWidth;
oBottom-=
el.offsetTop+el.offsetHeight;
st.left= st.fixedPLeft; st.top=
st.fixedPTop;
oLeft= el.offsetLeft-oLeft; oTop=
el.offsetTop-oTop;
// edge positioning fix
if
(st.fixedPWidth[1]==A && st.fixedPLeft!=A && st.fixedPRight!=A) {
tmp= el.offsetLeft; st.left= A; st.width= fixed_ARBITRARY+'px';
tmp= fixed_ARBITRARY+el.offsetLeft-tmp+cbLeft+cbRight;
st.left= st.fixedPLeft; st.width= ((tmp<1)?1:tmp)+'px';
}
if
(st.fixedPHeight[1]==A && st.fixedPTop!=A && st.fixedPBottom!=A) {
tmp= el.offsetTop; st.top= A; st.height= fixed_ARBITRARY+'px';
tmp= fixed_ARBITRARY+el.offsetTop-tmp+cbTop+cbBottom;
st.top= st.fixedPTop; st.height= ((tmp<1)?1:tmp)+'px';
}
//
move all non-auto edges relative to the viewport
st.fixedCLeft=
(st.fixedPLeft=='auto') ? oLeft : oLeft-cbLeft;
st.fixedCTop=
(st.fixedPTop=='auto') ? oTop : oTop-cbTop;
st.fixedCRight=
(st.fixedPRight=='auto') ? oRight : oRight-cbRight;
st.fixedCBottom= (st.fixedPBottom=='auto') ? oBottom :
oBottom-cbBottom;
// remove left-positioning of right-positioned
elements
if (st.fixedPLeft=='auto' && st.fixedPRight!='auto')
st.fixedCLeft= 'auto';
if (st.fixedPTop=='auto' &&
st.fixedPBottom!='auto') st.fixedCTop= 'auto';
}
// calculate
initial positioning of fixed backgrounds
for (i=
fixed_backgrounds.length; i-->0;) {
el= fixed_backgrounds[i];
st= el.style;
tmp= st.fixedBImage;
if (tmp) {
if
(tmp.readyState!='uninitialized') {
st.fixedBWidth=
tmp.offsetWidth;
st.fixedBHeight= tmp.offsetHeight;
st.fixedBImage= window.undefined;
}
}
st.fixedBX=
fixed_length(el, st.fixedBLeft, vpWidth-st.fixedBWidth);
st.fixedBY= fixed_length(el, st.fixedBTop,
vpHeight-st.fixedBHeight);
}
// now call scroll() to set the
positions from the values just calculated
fixed_scroll();
}
//
Scrolling. Offset fixed elements relative to viewport scrollness
var fixed_lastX, fixed_lastY;
var fixed_PATCHDELAY= 300;
var
fixed_patching= false;
// callback function after a scroll, because
incorrect scroll position is
// often reported first go!
function
fixed_patch() {
fixed_patching= false;
var scrollX=
fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop;
if
(scrollX!=fixed_lastX && scrollY!=fixed_lastY) fixed_scroll();
}
function fixed_scroll() {
if (!fixed_viewport) return;
var i,
el, st, viewportX, viewportY;
var scrollX=
fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop;
fixed_lastX= scrollX; fixed_lastY= scrollY;
// move non-nested
fixed-position elements
for (i= fixed_positions.length; i-->0;) {
st= fixed_positions[i].style;
viewportX= (st.fixedNest) ? 0 :
scrollX;
viewportY= (st.fixedNest) ? 0 : scrollY;
if
(st.fixedCLeft!='auto') st.left= (st.fixedCLeft+viewportX)+'px';
if (st.fixedCTop!='auto') st.top= (st.fixedCTop+viewportY)+'px';
viewportX= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 :
viewportX;
viewportY= (st.fixedCB==null ||
st.fixedCB==fixed_viewport) ? 0 : viewportY;
st.right=
(st.fixedCRight-viewportX+1)+'px'; st.right=
(st.fixedCRight-viewportX)+'px';
st.bottom=
(st.fixedCBottom-viewportY+1)+'px'; st.bottom=
(st.fixedCBottom-viewportY)+'px';
}
// align fixed backgrounds
to viewport
for (i= fixed_backgrounds.length; i-->0;) {
el=
fixed_backgrounds[i]; st= el.style;
viewportX= scrollX;
viewportY= scrollY;
while (el.offsetParent) {
viewportX-=
el.offsetLeft+el.clientLeft;
viewportY-= el.offsetTop
+el.clientTop;
el= el.offsetParent;
}
st.backgroundPositionX= (st.fixedBX+viewportX)+'px';
st.backgroundPositionY= (st.fixedBY+viewportY)+'px';
}
// call
back again in a tic
if (!fixed_patching) {
fixed_patching=
true;
window.setTimeout(fixed_patch, fixed_PATCHDELAY);
}
}
// Measurement. Load bg-image into an invisible element on the page,
when
// loaded write the width/height to an element's style for
layout use; detect
// when font size changes
function
fixed_measureBack(el) {
var measure=
document.getElementById('fixed-measure');
var img=
document.createElement('img');
img.setAttribute('src',
fixed_parseURL(el.currentStyle.backgroundImage));
measure.appendChild(img);
el.style.fixedBImage= img;
if
(img.readyState=='uninitialized')
img.attachEvent('onreadystatechange',
fixed_measureBackImage_ready);
}
function
fixed_measureBackImage_ready() {
var img= event.srcElement;
if
(img && img.readyState!='uninitialized') {
img.detachEvent('onreadystatechange',
fixed_measureBackImage_ready);
fixed_layout();
}
}
var
fixed_fontsize= 0;
function fixed_measureFont() {
var fs=
document.getElementById('fixed-measure').offsetHeight;
if
(fixed_fontsize!=fs && fixed_fontsize!=0)
fixed_delayout();
fixed_fontsize= fs;
return '5em';
}
// Utility. General-purpose
functions
// parse url() to get value inside
function
fixed_parseURL(v) {
v= v.substring(4, v.length-1);
if
(v.charAt(0)=='"' && v.charAt(v.length-1)=='"' ||
v.charAt(0)=="'" && v.charAt(v.length-1)=="'")
return
v.substring(1, v.length-1);
else return v;
}
// parse length or
auto or background-position keyword into number and unit
var
fixed_numberChars= '+-0123456789.';
var fixed_ZERO= new Array(0,
'px');
var fixed_50PC= new Array(50, '%');
var fixed_100PC= new
Array(100, '%');
var fixed_AUTO= new Array(0, 'auto');
function
fixed_parseLength(v) {
var num, i;
if (v=='left' || v=='top')
return fixed_ZERO;
if (v=='right' || v=='bottom') return
fixed_100PC;
if (v=='center') return fixed_50PC;
if (v=='auto')
return fixed_AUTO;
i= 0;
while (i<v.length &&
fixed_numberChars.indexOf(v.charAt(i))!=-1)
i++;
num=
parseFloat(v.substring(0, i));
if (num==0) return fixed_ZERO;
else return new Array(num, v.substring(i));
}
// convert parsed
(number, unit) into a number of pixels
function fixed_length(el, l,
full) {
var tmp, x;
if (l[1]=='px') return l[0];
if
(l[1]=='%') return Math.round(full*l[0]/100);
// other units -
measure by setting position; this is rather inefficient
// but
then these units are used for background-position so seldom...
tmp= el.currentStyle.left;
el.style.left= '0';
x=
el.offsetLeft;
el.style.left= l[0]+l[1];
x= el.offsetLeft-x;
el.style.left= tmp;
return x;
}
// convert stupid IE
offsetLeft/Top to page-relative values
function fixed_pageLeft(el)
{
var v= 0;
while (el.offsetParent) {
v+= el.offsetLeft;
el= el.offsetParent;
}
return v;
}
function fixed_pageTop(el) {
var v= 0;
while (el.offsetParent) {
v+= el.offsetTop;
el=
el.offsetParent;
}
return v;
}
// Scanning. Check document
every so often until it has finished loading. Do
// nothing until
<body> arrives, then call main init. Pass any new elements
// found
on each scan to be bound
var fixed_SCANDELAY= 500;
function
fixed_scan() {
if (!document.body) return;
if (!fixed_viewport)
fixed_init();
var el;
for (var i= 0; i<document.all.length; i++)
{
el= document.all[i];
if (!el.fixed_bound) {
el.fixed_bound= true;
fixed_bind(el);
} }
}
var
fixed_scanner;
function fixed_stop() {
window.clearInterval(fixed_scanner);
fixed_scan();
}
fixed_scan();
fixed_scanner= window.setInterval(fixed_scan,
fixed_SCANDELAY);
window.attachEvent('onload', fixed_stop);
window.attachEvent('onresize', fixed_delayout);
window.attachEvent('onscroll', fixed_scroll);
@end @*/
</script>
<style type="text/css">
body {
margin:0;
padding:0 10px 0 10px;
border:0;
background:rgb(123,187,221);
}
#page {
margin:10px 10px 10px 10px;
display:block;
width:1500px;
height:1500px;
border:1px solid #000;
background:#fff;
padding:10px;
}
#scroller {
display:block;
top:100px;
right:100px;
width:100px;
position: fixed;
border:1px solid #888;
padding:10px;
text-align:center;
font-weight:bold;
color:#000;
}
</style>
</head>
<body>
<div id="scroller">
DUMMY BUTTON
</div>
<div id="page">
</div>
</body>
</html>
