Page scrolling over a "position: fixed" <div> works in IE7 but not FF?

position fixed css IE7 firefox scrolling

[IronWill]

Can anyone tell me why a page with a DIV that has "position: fixed" will not scroll in Firefox if the mouse pointer is hovering over it, but the page will scroll with no problem in IE7?

I'd post an example link, but according to the rules that's forbidden, so...

Anyway, I've seen happen with other pages, and it is happening with mine. I have a sidebar on the right-hand side that I have fixed in place so it won't scroll, while the rest of the page DIV's are able to scroll. If I hover the mouse over other parts of the page, it scrolls as expected, but when I hover over the fixed DIV, instead of the rest of the page scrolling while the fixed DIV stays fixed, the whole page stays fixed in Firefox. In IE7, if I hover over the fixed DIV, the whole page scrolls like it should while the fixed DIV stays fixed, as expected. I take it this is a browser bug either in Firefox or IE7? Which way is it supposed to work, and how can I allow for page scrolling in both browsers even when the mouse pointer is over a fixed DIV?

Thanks!

[edited by: IronWill at 10:48 pm (utc) on May 18, 2007]

[Robin_reala]

Could you post some stripped-down sample code that demonstrates your problem? position:fixed should work fine in IE7 and Firefox.

[SuzyUK]

Ahh, I see it I think, you're talking about the mouse scroll whenever there's a fixed position div in place? If you clik the wheel and scroll it works but not if you simply use the scroll wheel, whenever the mouses happens to be over the fixed div..

It would appear to be a FireFox problem/difference as Opera exhibits the same behaviour as IE. Firefox has had problems in the past with scrolling/overflow so perhaps this is related to that problem that is now fixed, or perhaps this is just the way they've chosen to implement it

I'm haven't looked around the recs for expected behaviour in this situation and also don't know if there's a solution, I tried some z-index stuff but it made no difference

test code used:

CSS:
html, body {height: 100%;}
#fixed {
position:fixed;
right: 0;
top: 0;
height: 100%;
width: 300px;
background: #dad;
}

#content {
margin-right: 310px;
background: #eee;
}

HTML:
<div id="fixed"> fixed sidebar<br />
<a href="#">test link clickability</a></div>
<div id="content">
<p>loads of foo text to force scroll...</p>
</div>

Suzy

[IronWill]

Thank you for the replies.

Apparently the page works fine in some other browsers than IE7 too... I also happen to have a "#top" link in the fixed DIV, which is supposed to (and it works in IE7) bring the top of the page back in view, but when I click it in Firefox, absolutely nothing happens, though the other links I have in the DIV that link to other pages work fine, so I know that's not a z-index issue of not being able to click the buttons...

Some other advice I received was to validate my page, which for a few reasons is currently not validating as strict xhtml, so I figure I'll get it to validate first and see if that resolves anything in regard to the fixed DIV.

At this point, I'm hoping it's something I'm doing wrong, and not a browser bug, because I really need this to work, otherwise the page will not have the "liquid" functionality that I need it to have at different resolutions.

[Robin_reala]

You'll need an element with an id of 'top' at the top of the page for that to work in Firefox. IE guesses that you meant the top of the page anyway.

[IronWill]

Ah-hah! I think that's my link problem right there. I was just looking for "top" and I'm not finding it in my source (I could swear I included it). I'll add it in, or else have the link reference my "main" div then, whichever works. Thanks--that helped a lot! Now if I could just get the "fixed" issue licked.