Hello,
I read an article called "Tables or Div", I don't know who the author is, but he/she stated that there was a problem with CSS overflow scrolling in Mozilla:

I have developed a site with fixed headers & footers & a central scrolling div, I think that I might be on to a possible solution to this, and would like the author to contact me, so I can discuss it.

Thanks

Carlos
Back to top

Thanks for your inquiry.

That article could probably be updated, at the time it was written gecko 1.5 I think it was didn't support decent overflow auto mousewheel scrolling. We experimented further on that on this site:
www.phoenixwebtech.com
and found even more bugs in different browsers, including the following:

Opera > 7, requires a mouseclick to activate scrolling, could be deliberate, hard to say.

IE 6 windows, scrolling breaks when there are spaces in the scrolling content area, user has no idea why page stopped scrolling and leaves.

All new geckos, including firefox .7-1.x, perfect support.

IE 5.5, perfect support.
Safari, konqueror, poor support as of last year, haven't checked the newest releases.

To get overflow really working we had to use horrible tweaks and hacks, and the result ended up being far too unstable for our taste, we'd never do this commercially for any reason, although that site is kind of cool in its own way.

The conclusion is and was to stop using overflow:auto altogether, it takes too many hacks to make it work, not worth it, except for small scrolling areas, and even then it's annoying, like on code sample divs, breaks the overall page scroll every time you hit a sub div scroll.

The IE 6 bug is really serious, and since on a standard site that could be upto 80+% of users, I decided to just dump that method for real pages, just wasn't worth the headaches.
Back to top

Hi,

On

[new user link] [mod: cleaned up url]

the scrolling is not working correct in firefox. Site is scrolling correct in IE. When I remove overflow: auto. Site is scrolling correct in firefox,
but no scrollbars are displayed.

Is there a solution so that scrolling is working correct and also the scrollbars are displayed.

Thanx in advance.
Back to top

The site is scrolling correctly in Firefox 1.0.4, IE 5.5, and Opera 8.

Are you still having problems with that or did you figure out the problem?

Now the bouncing balls, that's another question altogether, those are really annoying, and because you're using overflow:auto, there's no way to scroll the page away from them.

Remember, moving parts of the page might be cute the first time you see the page, but after that they are just a major distraction away from your content, and do nobody any good.
Back to top

erikZ,

thank you for your quick answer.

I agree with the bouncing balls, but my customer wants this.

Is scrolling also working when you use the arrow down key? Because that's my problem. The top bar (with the bouncing balls) and the navigation left, must be fixed (like frames) and the content part must get scrollbars when necessary and must scroll the content also when you use the arrow down key.

Hopefully the problem is more clear now.
Back to top

Toby, when the customer specifies a certain behavior that is out of your control it doesn't matter what they want. In this case, if they want reliable cross browser down arrow/ page up / page down key scrolling, then they have to accept that they won't be using a scrolling div with overflow, but a standard webpage, which is the only way to deliver that type of action consistently cross browser.

It helps to think of it like the browser thinks of it: some browsers, like IE and Opera, after you click in the space that is supposed to be scrolling, but not before, will scroll with keyboard commands.

However, keep in mind that almost no user out there would think to click in the space that scrolls, not outside of it, to make it scroll. It's just that simple.

On the other hand, Firefox treats the scrolling keyboard functions related to to the actual page being displayed, so if the page itself doesn't go off the screen, it considers that the page isn't scrolling in terms of keyboard scroll commands.

Using technologies like overflow:auto always involve you in compromises, it's not consistently implemented, and is almost always problematic in terms of creating an intuitive user experience, which is why it's not used very much.
Back to top

ErikZ,

I want a reliable cross browser solution. Is it then possible to make this screen? With the topmenu and navigation left fixed for a better usability! or don't you agree with the latter?!



I'am very curious to your answer....
Back to top

Hi Toby. The basic thing to understand is that there is no cross browser solution that will do everything in every case.

You can get some features working in some browsers, but the amount of css hacks you need to implement to get those working makes it harder and harder to achieve those results.

If you fix left and top nav, and implement the IE workaround that requires, you lose some IE 5x functionality. And this isn't even getting into mac IE 5x, which is a disaster.

Page layout options :: Review
A standard webpage, no position:fixed, no overflow:auto
mousewheel scrolling, all browsers: function - perfect
up/down/pageup/pagedown keyboard navigation: function - perfect

Iframes or overflow:auto div, varying functionality, most require a click in the overflow div to activate keyboard scrolling. Note that the functional page drawbacks are very similar between using an iframe and overflow:auto div. Main advantage over iframes is superior page performance, since you are only loading 1 page instead of 2 as with an iframe.

Position:fixed top nav and left nav. Position fixed is the worst supported css of the above choices, by far.
IE has no position fixed support. Mozilla/Gecko has perfect position:fixed support. Opera has very buggy position fixed support. I haven't checked Safari or Konqueror, but I think they have very weak support.

Position fixed can only be used reliably in the type of design you are making, with the left nav being to the left on the page, no margins. IE correctly ignores position:fixed, and the page and navs just scroll, very good degradation.

You can check this site out to see an example of the hacks necessary to get decent, but not great, cross browser support for that type of layout. It's a pain to get working, and it's not something I would ever do on a commercial level, but there it is, it works. Ugly css hacks and all.

I never use either position:fixed or overflow:auto for primary page functionality on a commercial site, it's not worth the headaches.

Website Useability Myths :: the client is wrong
The client's idea that having the navigation fixed is more 'useable' is wrong, users like what is most familiar, and what is most familiar, and most stable, and most simple, all in one, is a webpage that scrolls. I did recently see a very nice use of overflow:auto on bontrager's new website, but notice that the question of keyboard scrolling is completely abandonned. You always make sacrifices to have very slick techniques with CSS, ALWAYS.

Conclusion
As long as IE, Firefox, Opera, and safari, continue to have varying implementations of CSS 2, it will always be like this.
Back to top

Erikz, I have to laugh, I was just reading one of my favorite sites, well, really almost all my favorite sites, except one from Europe that still uses frames, and I caught myself using the keyboard down arrow to scroll the page. Why could I do this without thinking? Because the web page creator didn't use silly things like overflow:auto or position fixed, he gave me a standard webpage, that works like 99% of all webpages.

To get back up to the nav I'd scrolled past, ctrl + home.

Keep it simple and you'll keep your users coming back. Make it complicated, and your users will get confused and leave. Make the site for your users, not for you. The average user is already completely at their technical limits when it comes to the web, they can barely function with it the way it is, don't make it different or complicated, make it simple and intuitive.
Back to top

ErikZ,

Thank you for your answer. I'am now busy with a presentation for my customer to convince hime to go for the webbrowser that scrolls with no fixed elements.
Back to top