Fixed-position div covering scrollbar in Firefox & Safari

[CKlemow]

I should preface this by saying I'm not a programmer and don't know javascript at all, and my CSS knowledge is sketchy, so I've been Googling for pre-fab solutions and making what little alterations I can via guesswork.

In my Googling, I found a lovely cross-browser solution for fixed-position divs on this page, via the V7 Network's Web Development Community:

http://dev.jdenny.co.uk/css/ie_fixed.html

It mostly works, but I need the div to be 100% width, and the div covers the browser's scrollbar in both Firefox and Safari. The problem does not happen in IE or Opera. (I've tried all four browsers on my PC, as well as Safari on a Mac.)

Here's the test page (ignore the other malfunctioning or half-assed stuff; I'll be fixing all that in due time):

http://www.sacredfools.org/upcoming-test.htm

I've seen it suggested elsewhere on this forum that to solve this problem, you need to use conditional comments, but so far as I can tell, the conditional comments only apply to IE, and I can't figure out how to amend the code to apply them anyway. (The thread I found here was from 2003, and the explanatory links no longer worked.)

The specific code in question from the page is below; this is going to be used as a Server-Side Include in order to put the site's menu on the top of every page so that I can move away from using frames:

Code: Select all

<script>
function calculateBgX(oElement) {
   return document.body.scrollLeft - getOffsetLeft(oElement);
}
function calculateBgY(oElement) {
   return document.body.scrollTop - getOffsetTop(oElement);
}

function getOffsetTop(oElement) {
   var iResult= oElement.offsetTop;
   while (oElement.offsetParent) {
      oElement = oElement.offsetParent;
      iResult += oElement.offsetTop;
   }
   return iResult;
}
function getOffsetLeft(oElement) {
   var iResult= oElement.offsetLeft;
   while (oElement.offsetParent) {
      oElement = oElement.offsetParent;
      iResult += oElement.offsetLeft;
   }
   return iResult;
}
</script>
<style>
#fixed {
   position: fixed;
   position: expression("absolute");
   left: 0px;
   padding: 0px;
   width: 100%;
   top: 0px;
   height: 89px;
   top: expression(eval(document.body.scrollTop));
}
body {
   background: url('x.gif');
   background-attachment: fixed;
        margin:0;
}

html {height:100%}

</style>
<div id="fixed">
  <iframe src="http://www.sacredfools.org/top-test.htm" frameborder=0 marginheight=0
 marginwidth=0 width=100% height=89px scrolling=no"></iframe>
 </div>
<div style="height:89px"></div>

X.gif is simply a transparent pixel. The code, for whatever reason, seems to need some graphic there; without it, the div flickers as you scroll. The extra div below is simply to keep the top of the content of each page from getting lost under the fixed-position menu!

(I'm putting the actual menu page in an iframe within the div so that its stylesheet doesn't conflict with the stylesheets of other pages on the site, some of which are styled differently - the site is very large, with 12 years of history, so I'm just trying to keep things simple. Maybe I'll iron that out better in the future, but for now, I don't think it's part of the problem; the div is covering the scrollbar in Firefox and Safari whether it's got an iframe in it or not... and if I apply the id="fixed" directly to the iframe rather than wrapping it in a div, I still get exactly the same result.)

Any help would be much appreciated. Thanks!

[CKlemow]

I suppose I should have tried this in the first place, but the problem seems to have nothing to do with the IE hack... even a flat-out fixed-position div with no fancy tricks does the same thing when the width is 100%. I'm kinda surprised I can't find anything online about this, as you'd think this behavior would be commented on more often.

http://www.sacredfools.org/upcoming-test2.htm

And the code:

Code: Select all

<div style="position:fixed; width:100%; left:0px; top:0px; height:89px; background-color:#ffffff"></div>

In this case, Firefox and Safari behave exactly the same as before, with the div covering the part of the browser's scrollbar that it overlaps. Opera works perfectly. IE, of course, without the hack, can't keep the div fixed to the screen - it scrolls away - but at least the div isn't covering up the scrollbar.

(Incidentally, I'm testing in IE7, IE6, Firefox 3.5.1, Safari for PC 4.0.2 and Opera 9.64.)

[jscher2000]

Your scroll bar is on the document rather than the window. Delete the overflow rule and reload:

Code: Select all

html, body { 
height:100%; 
width:100%; 
overflow:auto; 
} 

(I tested using the DOM Inspector extension to play with the CSS properties in Fx 3.0.11)

[CKlemow]

AHA! Removed the overflow command from the page's stylesheet and that done indeed fixed it all. THANK YOU!

(And apologies if anybody saw the lengthy if confused reply that this replaces. Guh. I shouldn't have tried to figure this out between 3 and 4 am!)