CSS2: overflow: scroll - Thoughts?

What are some thoughts on this feature?

[crowthercm]

Hello,

I've recently been toying with using the overflow feature built into CSS more extensively when designing my websites. I think it's fantastic in terms of giving me more control over the visitors experience and more importantly keeping my pages logically organized.

I don't see overflow being used much (although it's starting) and was wondering whether this is because people know of a limitation that I don't. Or more promisingly that the feature simply isn't widely known about yet.

Here is some of the data I've collected on the overflow attribute:

Inheritance: none
Optional Values: (auto, hidden, scroll, and visible)
Compatability: CSS Version 2.

Known Browser Issues:

Netscape 4: Overflow never functions properly as it expands the height of the box to accomodate the "true" height of the element.

IE (up to and including 6): Seems to have no issues with scroll, which is consequently the property I am most interested in. Apparently there are expansion issues with the visible property.

IE 4 for Mac: Does not support adding scroll bars to elements using either auto and scroll.

Ok, so my take on this is that if I start using overflow: scroll; more exclusively, I am going to be fine for all browsers except; (1) Netscape 4, and (2) Internet Explorer for macintosh. I think these are reasonable sacrifices, does anyone see something else that I'm missing and should be aware of?

Thanks,
Chris

[RammsteinNicCage]

I've never used it because I didn't know what it did (ignorance is bliss?). Do you know of any non-personal sites (ie, yahoo, amazon, cnn, etc) that use it? I think posting links like that are ok.

Jennifer

[SuzyUK]

I think it will be used more extensively when it has better support.. Personally I like it and would use it more if I could

the only workaround that I'm aware of is to use an iframe instead, but that's not perfect either :(

Suzy

[crowthercm]

Hello,

From what I've seen most sites are still using iframes. You can quickly test it yourself by just adding a div like this:

#overflowTest{
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 500px;
background: #f0f0f0;

overflow: scroll;
}

Work arounds are definitely a problem like suzyUK mentioned. For a non complient browser the results will be throwing the text box down to the full height the content would normally require.

My thoughts so far for work around (not tested yet) are:
(1) Use environments to remove the feature entirely, only works for non-essential but value adding features
(2) Put the div in a location that overflow is still going to display usuable content, even if a bit more ugly. i.e. the last usuable content section on a page.
(3) iframes - This should provide a fix for some browser types I suppose but only minimizes the problem.

Regards,
Chris

[edited by: Nick_W at 8:11 pm (utc) on Sep. 28, 2003]

[stinkoman]

overflow:auto is my new favorite toy... since my company loves lots of text for SEO purposes, it's great to maintain a clean design.

[edited by: Nick_W at 6:42 pm (utc) on Sep. 29, 2003]

[BlobFisk]

We recently stopped supporting old browsers (read: NN4.x) and I have been using overflow:auto/scroll here and there since (in fact, extensively on a CRM application I'm doing the UI for)

Browser support is not bad at all and I think that it can be a very powerful tool.