OK, I found a workaround: I wrap the whole document with a div and use that div's left offset value as a calibrator. This works in FF3 and IE7, but not Safari. My questions are:
1 - Is there a simpler way to do the wrapping than what I'm doing? 2 - Is there a better way to create the "patched" offset? 3 - Does anyone know why this doesn't work in Safari? My code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="jquery.js" ></script> <script> (function($) { var outer; $.fn.old_offset = $.fn.offset; $.fn.offset = function () { offset = this.old_offset(); offset.left -= outer.old_offset().left; return offset; } $(function() { outer = $("<div style=\"margin: 0; overflow: hidden; position: absolute;\"></div>"); $("body").children().appendTo(outer); $("body").append(outer); outer.height($(window).height()); outer.width($(window).width()); $(window).resize(function () { outer.height($(window).height()); outer.width($(window).width()); }); }); })(jQuery); $(function() { for(var i=0; i< 200; i++) { $("#overflow_text").append('x'); } offset = $("#coverme").offset(); $("#moveme").css(offset); $(window).resize(function() { $("#moveme").css($("#coverme").offset()); }); }); </script> </head> <body dir="rtl" style="margin: 0;"> <div style="background-color: blue; height: 200px; width: 200px" id="coverme"></div> <div style="background-color: green; height: 100px; width: 100px; position: absolute;" id="moveme"></div> <p id="overflow_text"></p> <span style="position:absolute; visibility:hidden; right: -100px">text</span> </body> Thanks