[thelist] overflow: auto/scroll

[.jeff]

aardvark,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: aardvark
>
> using the following CSS:
> pre	{
>   font-family : Courier, "Courier New", fixed-width, monospace ;
>   font-size : 80% ;
>   line-height : 140% ;
>   clear : both ;
>   overflow : auto ;
>   padding : 5px ; }
>
> on this page (and others):
> http://roselli.org/adrian/articles/breadcrumbs.asp
> (the evolt style makes the photo in the top-left not
> have the halo)
>
> only N6/win2k (so far) seems to render (correctly) the
> larger <pre>s, [...]
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

correctly.  not really.  nn6 is implying a width on the pre block that isn't
specified.  imo, ie is doing the correct thing, not nn6.  however, give this
a shot. add a "width: 98%" to your pre declaration above and you'll see that
(at least in ie6) it works like it does in nn6.  this didn't have any
terribly adverse effects in nn6 in my test document.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> that would otherwise go off the window, with
> scrollbars... IE5.5 just makes the <pre>s go off
> window,
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

yup, it needs to be told where the boundary for the element is.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> O6 stops the <pre> borders at the window edge, but the
> text keeps going (as if it were overflow: visible;)...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

yeah, one of the things broken in opera's css support that really sucks.
from my testing it doesn't appear to support overflow: auto in any fashion.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> i don't have a Mac at home, but i recall IE Mac might
> actually collapse it to nothing but a dotted border...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> tried overflow:scroll; as well, but it made *everything*
> scrolly in N6, which isn't what i want, and had no other
> effects in the other browsers...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

odd.  i'm seeing the same behavior regardless of overflow set to auto or
scroll.  when it's set to auto, <pre></pre> block doesn't resize to make
room for the horizontal scrollbar causing the last line or so to appear
underneath the scrollbar which in turn causes a vertical scrollbar.  quite
annoying.

playing with it a bit more, i set overflow-x to auto, overflow-y to visible,
and gave the bottom 25px of padding (to accommodate for the scrollbar) and
it works as expected in ie6 and nn6.  still no joy in opera 6.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> ultimately, i'm looking for a way to show blocks of code
> without relying on <textarea>s, pop-up windows, or
> blocks of text that munge the page forcing the user to
> do the left-right-scroll-dance...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

aw, so just do the left-right-scroll-dance within <pre></pre> blocks instead
eh?

;p

i think it comes down to adding this to your pre declaration:

    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 25px;
    width: 98%;

adjust the bottom padding to suit your taste and audience's potential
scrollbar size.  (if rudy's visiting your site you better make it 40px or
so.  *grin*)

good luck,

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/