Stylesheets - help w/ pos:fixed; overflow:scroll

Author

help w/ pos:fixed; overflow:scroll

Ingrid

2004-06-26, 7:15 pm

Dear group,

I wanted to make a scrollable list-menu that is fixed in place and fitted to the height of the browser window, so I tried:

ol#nav{
position: fixed;
top: 2em; bottom: 0; height: auto;
left: 0; width: 12em; right: auto;
overflow: scroll;
}

Or should I set the menu-list's parent DIV to "position: fixed; overflow: scroll" instead?

Any tips?

thank you! -- ingrid

Brian

2004-06-27, 7:16 pm

Ingrid wrote:

> I wanted to make a scrollable list-menu that
> is fixed in place and fitted to the height of
> the browser window, so I tried:
>
> ol#nav{
> position: fixed;
> top: 2em; bottom: 0; height: auto;
> left: 0; width: 12em; right: auto;
> overflow: scroll;
> }

I'm not sure what you want; perhaps you want height: 20em;
overflow: scroll?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Ingrid

2004-06-27, 7:16 pm

>I'm not sure what you want; perhaps you want height: 20em; >overflow:
scroll?

Hi Brian! Thanks for the reply.

I was thinking that {position: fixed; top: 0; bottom: 0; height: auto;
overflow: scroll;} would make a fixed, scrollable list that is exactly
as tall as the browser window:

http://www1.asstr.org/~ingrid/joesguide-authors.html
-- warning! slightly naughty text content (but no pictures)

In Camino, I can get the effect I want by applying those rules
("position: fixed; overflow: scroll;...") to the list itself or to the
DIV that contains the list; I don't know if there's any advantage to
doing it one way versus the other.

I'm a little worried that it might not show right in old and sloppy
browsers.

Brian

2004-06-27, 11:15 pm

Ingrid wrote:

> I was thinking that {position: fixed; top: 0; bottom: 0; height: auto;
> overflow: scroll;} would make a fixed, scrollable list that is exactly
> as tall as the browser window:
>
> http://www1.asstr.org/~ingrid/joesguide-authors.html

Works in Firefox 0.8/Win xp.

> In Camino, I can get the effect I want by applying those rules
> ("position: fixed; overflow: scroll;...") to the list itself or to the
> DIV that contains the list; I don't know if there's any advantage to
> doing it one way versus the other.

If you'd like, put up a test case with the alternate approach, and let
us Windoze users try them both.

> I'm a little worried that it might not show right in old and sloppy
> browsers.

Your worries are well-founded with position: fixed. Many browsers
choke on it. Hide it from Netcape 4 and IE 4 using @import; hide it
from IE 5-6/Win by using a child selector; if there are links in the
list, then also hide it from IE 5/Mac using @media.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/