Frame-like fixed column?

[Mason A. Clark]

Masters:

On two or three-column layouts, one column often has a list
of links. Scrolling the page hides them. I'm aware there's
supposed to be the ability to fix the column (frame-like).
I have some bits of such code but haven't yet made it
work well.

Question: Why have I never seen an example on the web?
Not that I've seen everything, but I've seen numerous pages
that use CSS and never a fixed column where badly needed.

Is it practical? Any tips on how to do it?

Mason C

[Neal]

On Fri, 30 Jan 2004 07:24:32 GMT, Mason A. Clark
<ma*******@THIS ix.netcom.comQ> wrote:

Masters:

On two or three-column layouts, one column often has a list
of links. Scrolling the page hides them. I'm aware there's
supposed to be the ability to fix the column (frame-like).
I have some bits of such code but haven't yet made it
work well.

Question: Why have I never seen an example on the web?
Not that I've seen everything, but I've seen numerous pages
that use CSS and never a fixed column where badly needed.

Is it practical? Any tips on how to do it?

Mason C

I've got some good news and some bad news.

Good news: CSS does allow for position: fixed where when you scroll the
page the positioned element will stay put.

Bad news: IE does not support fixed positioning. So if you use it, be sure
it can work as absolute positioning.

I tried a fixed navigation div on a site. It stayed put in non-IE
browsers. In IE it behaved like absolute. Someone in this or another forum
told me they've seen it not behave like absolute in IE, but I've never
observed this phenomenon. Assuming that's the case, though, you could
always use the old fool-IE-and-fix-for-Opera trick (usually used for the
box model problem) to make it absolute in IE and fixed in other browsers.

#nav {
position: absolute;
voice-family: "\"}\"";
voice-family: inherit;
position: fixed;
}

html>body #nav{
position: fixed;
}

[Markus Ernst]

"Neal" <ne*****@spamrc n.com> schrieb im Newsbeitrag
news:op******** ******@news.rcn .com...

On Fri, 30 Jan 2004 07:24:32 GMT, Mason A. Clark
<ma*******@THIS ix.netcom.comQ> wrote:

Masters:

On two or three-column layouts, one column often has a list
of links. Scrolling the page hides them. I'm aware there's
supposed to be the ability to fix the column (frame-like).
I have some bits of such code but haven't yet made it
work well.

Question: Why have I never seen an example on the web?
Not that I've seen everything, but I've seen numerous pages
that use CSS and never a fixed column where badly needed.

Is it practical? Any tips on how to do it?

Mason C

I've got some good news and some bad news.

Good news: CSS does allow for position: fixed where when you scroll the
page the positioned element will stay put.

Bad news: IE does not support fixed positioning. So if you use it, be sure
it can work as absolute positioning.

I tried a fixed navigation div on a site. It stayed put in non-IE
browsers. In IE it behaved like absolute. Someone in this or another forum
told me they've seen it not behave like absolute in IE, but I've never
observed this phenomenon. Assuming that's the case, though, you could
always use the old fool-IE-and-fix-for-Opera trick (usually used for the
box model problem) to make it absolute in IE and fixed in other browsers.

#nav {
position: absolute;
voice-family: "\"}\"";
voice-family: inherit;
position: fixed;
}

html>body #nav{
position: fixed;
}

If you understand German you might be interested in the following article:

http://www.jendryschik.de/wsdev/css/fixed/

If you don't understand German you might still understand the code examples
in the article that provide another IE fix which works well on a page that I
am building at the moment.

--
Markus

[Mason A. Clark]

On Fri, 30 Jan 2004 10:28:27 +0100, "Markus Ernst" <derernst@NO#SP #AMgmx.ch>
wrote:

"Neal" <ne*****@spamrc n.com> schrieb im Newsbeitrag
news:op******* *******@news.rc n.com...

On Fri, 30 Jan 2004 07:24:32 GMT, Mason A. Clark
<ma*******@THIS ix.netcom.comQ> wrote:

> Masters:
>
> On two or three-column layouts, one column often has a list
> of links. Scrolling the page hides them. I'm aware there's
> supposed to be the ability to fix the column (frame-like).
> I have some bits of such code but haven't yet made it
> work well.
>
> Question: Why have I never seen an example on the web?
> Not that I've seen everything, but I've seen numerous pages
> that use CSS and never a fixed column where badly needed.
>
> Is it practical? Any tips on how to do it?
>
> Mason C
>
>

I've got some good news and some bad news.

Good news: CSS does allow for position: fixed where when you scroll the
page the positioned element will stay put.

Bad news: IE does not support fixed positioning. So if you use it, be sure
it can work as absolute positioning.

I tried a fixed navigation div on a site. It stayed put in non-IE
browsers. In IE it behaved like absolute. Someone in this or another forum
told me they've seen it not behave like absolute in IE, but I've never
observed this phenomenon. Assuming that's the case, though, you could
always use the old fool-IE-and-fix-for-Opera trick (usually used for the
box model problem) to make it absolute in IE and fixed in other browsers.

#nav {
position: absolute;
voice-family: "\"}\"";
voice-family: inherit;
position: fixed;
}

html>body #nav{
position: fixed;
}

If you understand German you might be interested in the following article:

http://www.jendryschik.de/wsdev/css/fixed/

If you don't understand German you might still understand the code examples
in the article that provide another IE fix which works well on a page that I
am building at the moment.

(I hate bottom posting.)

Thank you, Neal and Marcus. I'm elated by the prospects.

HEY! It works -- worken sie gut -- Ich nicht sprachen
Deutch but copied the code and played with it. It works in Opera 7 and
Netscape 7.1 and with some jitter of the fixed boxes in MSIE 6.

I put the suggested MSIE things in and out with no difference in MSIE 6 but
can't test in earlier version of any of these browsers. Since they're all
free (?) I can urge the viewer to update :-) Or *hope* the boxes stay
visible, but scrolling as most do.

Here's my test page, crap and all:

http://home.earthlink.net/~frontal-lobe/no-scroll.html

no comments re: content or validation please :-)

but if you can fix the MSIE6 jitter !

Mason C

[Mason A. Clark]

Status report: a real page in process:

http://home.earthlink.net/~frontal-l...no-scroll.html

( in development -- the sidebar links are dummies)

A moment ago the jitter disappeared from MSIE6. I have no
idea where it went but it was after I entered body details and
filled in the text content.

This seems to me an excellent trick for all those many pages
that have a sidebar with links -- or whatever.

Mason C in how many browsers?

[Neal]

On Sat, 31 Jan 2004 02:15:53 GMT, Mason A. Clark
<ma*******@THIS ix.netcom.comQ> wrote:

Status report: a real page in process:

http://home.earthlink.net/~frontal-l...no-scroll.html

( in development -- the sidebar links are dummies)

A moment ago the jitter disappeared from MSIE6. I have no
idea where it went but it was after I entered body details and
filled in the text content.

This seems to me an excellent trick for all those many pages
that have a sidebar with links -- or whatever.

Mason C in how many browsers?

Just take care it isn't so tall that smaller viewports might not see the
whole thing. That's the one danger. With fonts full size the height
shouldn't be more than say 450 pixels. Anything taller you run the risk of
part of the sidebar being unusable.

[kchayka]

Neal wrote:

On Sat, 31 Jan 2004 02:15:53 GMT, Mason A. Clark
<ma*******@THIS ix.netcom.comQ> wrote:

http://home.earthlink.net/~frontal-l...no-scroll.html

Just take care it isn't so tall that smaller viewports might not see the
whole thing. That's the one danger.

There is a second issue in this case, too - width. On the test page at
my preferred (largish) text size, the sidebar links overflow into the
content area. IE's broken overflow behavior expands the width of the
sidebar column so the first few characters of each content line are
obliterated by the black background color of the sidebar. In mozilla,
the text overflows the black background so it looks broken.

Tis the problem of setting the width of a text element in px units. I
suggest using em units instead.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.