HOWTO: create a non-scrolling header, with a scrolling (auto) body

Bob

unread,

Apr 10, 2003, 12:10:38 PM4/10/03

to

I've now been screwing around with css for a little bit now, and still
can not see how to produce the effect desired.

I would like to have a header (with say db field names) accross the
top of a page - and would like this header permanently fixed in that
position.

Then I would like to scroll the contents of said database under the
header - just like you might do w/ excel, or ms access...

problems I've encountered:
the only way I can figure out to cause the header not to scroll, is by
restricting the height of the data box. - this is no good - I want the
data box to conform to the size of the UA. As soon as I remove the
height restriction, the header scrolls off the top with the data.

after tinkering with this for some time, I'm becoming convinced that I
need to execute this using frames.

I would really like to see if there's a css solution to this....

ideas? pointers?

tia - Bob

Timo Virkkala

unread,

Apr 10, 2003, 12:42:58 PM4/10/03

to

Bob wrote:
> I would like to have a header (with say db field names) accross the
> top of a page - and would like this header permanently fixed in that
> position.
> Then I would like to scroll the contents of said database under the
> header - just like you might do w/ excel, or ms access...

Could this be done with position:fixed..?
For instance, if you have the page "split" into two DIV-elements, with
the top DIV containing the headers and set to position:fixed, and the
bottom DIV containing the data itself.

I'll look into this and see what I can come up with..

Bob

unread,

Apr 10, 2003, 7:26:03 PM4/10/03

to

hi Timo;

yes, I have tried doing just that;
while this DOES fix the position of the header, it also allows the
text of the 2nd div element to scroll THRU the header. (so you see
text on top of text)

I've tried positioning the 2nd div's top, I've tried adding pad,
margin, etc... nothing seems to prevent this behavior....

I've looked thru css.2 docs for anything that might make the header
div "opaque" so-to-speak (thinking I could use z-index to move the
header out front); but can't find any answers there either...

any other thoughts or ideas? :)
tia - Bob

Bob

unread,

Apr 10, 2003, 7:32:56 PM4/10/03

to

On Thu, 10 Apr 2003 19:42:58 +0300, Timo Virkkala <w...@nic.fi> wrote:

Also - I forgot to mention;

that this technique doesn't work at-all; if you attempt to put a thead
in div1, and td in div2....

div1 never fixes in place...

Bob

Stanimir Stamenkov

unread,

Apr 10, 2003, 8:28:06 PM4/10/03

to

Bob wrote:

> On Thu, 10 Apr 2003 19:42:58 +0300, Timo Virkkala <w...@nic.fi> wrote:
>
>> Bob wrote:
>>
>>> I would like to have a header (with say db field names) accross the
>>> top of a page - and would like this header permanently fixed in that
>>> position.
>>> Then I would like to scroll the contents of said database under the
>>> header - just like you might do w/ excel, or ms access...
>>
>> Could this be done with position:fixed..?
>> For instance, if you have the page "split" into two DIV-elements, with
>> the top DIV containing the headers and set to position:fixed, and the
>> bottom DIV containing the data itself.
>

> yes, I have tried doing just that;
> while this DOES fix the position of the header, it also allows the
> text of the 2nd div element to scroll THRU the header. (so you see
> text on top of text)
>
> I've tried positioning the 2nd div's top, I've tried adding pad,
> margin, etc... nothing seems to prevent this behavior....
>
> I've looked thru css.2 docs for anything that might make the header
> div "opaque" so-to-speak (thinking I could use z-index to move the
> header out front); but can't find any answers there either...

Something like this (the attachment)? But then again - it is not
working in IE.

--
Stanimir <stanio(_at_)gbg.bg>

stg.html

Bob

unread,

Apr 10, 2003, 9:53:37 PM4/10/03

to

YES! - that's what I'm trying to do - BUT - I didn't realize that what
I WAS trying WAS working - IF I used mozilla!!!!

so that creates the next problem - if none of this stuff works w/ IE -
then WHY DO ALL THOSE "FRAMES ARE EVIL" cry babies, keep saying that
css is the answer to all our problems?!?!?

seems to me - this is a SIMPLE excersice that would have taken me 5
minutes using frames, and I've now wasted DAYS trying to make it work
w/ css - only to find - it's not cross-ua workable!?!?!?!?!?!?

AAAAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRHHHHHH!

PS: - since everyone seems to be starting a new thread each time they
answer me - is there a netiquette in this NG against replying?
- just curious....

tia - Bob

Bob

unread,

Apr 10, 2003, 9:54:14 PM4/10/03

to

On Fri, 11 Apr 2003 03:28:06 +0300, Stanimir Stamenkov
<sta...@notvalid.net> wrote:

YES! - that's what I'm trying to do - BUT - I didn't realize that what

Stanimir Stamenkov

unread,

Apr 11, 2003, 6:33:01 AM4/11/03

to

Bob wrote:

Yes, the frames are evil - in the example I haven't used frames,
just CSS styling?!?

BTW there are couple of solutions - there could be used TABLE with
its TBODY set to 'overflow: auto' and some fixed with but then again
- it doesn't work in IE.

In the case with the header DIV row 'fixed' if you want the the body
not to show through it you could just set the 'background-color' other
than transparent (see the attachment).

> PS: - since everyone seems to be starting a new thread each time they
> answer me - is there a netiquette in this NG against replying?
> - just curious....
>

Huh, I see one thread only?!?

--
Stanimir <stanio(_at_)gbg.bg>

stg01.html

Bob

unread,

Apr 11, 2003, 8:18:13 AM4/11/03

to

On Fri, 11 Apr 2003 13:33:01 +0300, Stanimir Stamenkov
<sta...@notvalid.net> wrote:

>Bob wrote:
>
>> On Fri, 11 Apr 2003 03:28:06 +0300, Stanimir Stamenkov
>> <sta...@notvalid.net> wrote:
>>
>>> Something like this (the attachment)? But then again - it is not
>>> working in IE.
>>>
>>
>> YES! - that's what I'm trying to do - BUT - I didn't realize that what
>> I WAS trying WAS working - IF I used mozilla!!!!
>>
>> so that creates the next problem - if none of this stuff works w/ IE -
>> then WHY DO ALL THOSE "FRAMES ARE EVIL" cry babies, keep saying that
>> css is the answer to all our problems?!?!?
>>
>> seems to me - this is a SIMPLE excersice that would have taken me 5
>> minutes using frames, and I've now wasted DAYS trying to make it work
>> w/ css - only to find - it's not cross-ua workable!?!?!?!?!?!?
>>
>> AAAAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRHHHHHH!
>>
>
>Yes, the frames are evil - in the example I haven't used frames,
>just CSS styling?!?
>
>BTW there are couple of solutions - there could be used TABLE with
>its TBODY set to 'overflow: auto' and some fixed with but then again
>- it doesn't work in IE.
>

true - I see that you're not using frames; However - if NONE of this
is working in IE; then how can you ask people not to use frames (which
DOES work PERFECTLY cross-ua) ??

iow: there appears to be NO solution to this excercise for IE; so that
means any good designer will NOT use this technology until it works on
most UA's. - And that means - the only way to accomplish this task is
via frames!

>> PS: - since everyone seems to be starting a new thread each time they
>> answer me - is there a netiquette in this NG against replying?
>> - just curious....
>>
>
>Huh, I see one thread only?!?

In each subsequent reply there's an extra space between "(auto)" &
"body" in the subject line, causing my NG client (Agent) to begin a
new thread. - I'm shocked to hear you don't see the same thing. (and
confused)

ne-way - tx again; curious to hear how people can promote css, when it
doesn't work in IE!!

- Bob

Cybarber

unread,

Apr 11, 2003, 8:44:42 AM4/11/03

to

body{margin:0;border-style:none;padding:0;overflow:hidden;font-weight:1em;}
#headerpart {position:absolute;top:0;left:0;width:100%;height:15%;background:yellow;overflow:auto;font-weight:1em;}
#bodypart {position:absolute;top:10%;left:0;width:100%;height:85%;background:steelblue;overflow:auto;font-weight:1em;}

<BLOCKQUOTE
style="PADDING-RIGHT: 0px; PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #000000 2px solid; MARGIN-RIGHT: 0px">
<DIV>"Bob" <<A
href="mailto:nospa...@starnetwx.net">nospa...@starnetwx.net</A>>
schreef in bericht <A
href="news:me5b9v8jcrqb8t597...@4ax.com">news:me5b9v8jcrqb8t597...@4ax.com</A>...</DIV>I've
now been screwing around with css for a little bit now, and still<BR>can not
see how to produce the effect desired.<BR><BR>I would like to have a header
(with say db field names) accross the<BR>top of a page - and would like this
header permanently fixed in that<BR>position.<BR><BR>Then I would like to
scroll the contents of said database under the<BR>header - just like you might
do w/ excel, or ms access...<BR><BR>problems I've encountered:<BR>the only way
I can figure out to cause the header not to scroll, is by<BR>restricting the
height of the data box. - this is no good - I want the<BR>data box to conform
to the size of the UA. As soon as I remove the<BR>height restriction, the
header scrolls off the top with the data.<BR><BR>after tinkering with this for
some time, I'm becoming convinced that I<BR>need to execute this using
frames.<BR><BR>I would really like to see if there's a css solution to
this....<BR><BR>ideas? pointers?<BR><BR>tia  -
Bob<BR></BLOCKQUOTE>

Cybarber

unread,

Apr 11, 2003, 8:52:41 AM4/11/03

to

"Cybarber" <luc...@emergo.nl> schreef in bericht news:uX2migC...@TK2MSFTNGP10.phx.gbl...

Stanimir Stamenkov

unread,

Apr 11, 2003, 8:51:22 AM4/11/03

to

Bob wrote:

> In each subsequent reply there's an extra space between "(auto)" &
> "body" in the subject line, causing my NG client (Agent) to begin a
> new thread. - I'm shocked to hear you don't see the same thing. (and
> confused)
>

Typically the mail clients use the 'References' headers for
threading. "Agent" seems limited in that aspect (using only the
subject title).

> ne-way - tx again; curious to hear how people can promote css, when it
> doesn't work in IE!!
>

IE has some limitations. The first proposed example would
work if you use absolute content dimensions.

--
Stanimir <stanio(_at_)gbg.bg>

stg02.html

Richter

unread,

Apr 11, 2003, 10:15:11 AM4/11/03

to

Stanimir Stamenkov wrote:

> ------------------------------------------------------------------------
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
>
> <html lang="en">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
> <meta http-equiv="Content-Style-Type" content="text/css">
> <title>example</title>
> <style media="screen" type="text/css">
> div {
> border: Window 0.2em outset;
> padding: 0 0.3em;
> font-size: 1em/1.3 sans-serif;
> }
> #cols {

> position: absolute;
> top: 0; left: 0;

> width: 50em;
> margin-bottom: auto;
> }
> #rows {
> position: absolute;
> top: 1.5em; left: 0;
> width: 50em; height: 20em;
> overflow: auto;
> }
> </style>
> </head>
> <body>
>
> <div id="cols">columns</div>
> <div id="rows">
> rows<br><br><br><br><br>
> rows<br><br><br><br><br>
> rows<br><br><br><br><br>
> rows<br><br><br><br><br>
> rows<br><br><br><br><br>
> rows<br><br><br><br><br>
> rows
> </div>
>
> </body>
> </html>

This last example just does not cut it.

An example of pure CSS - Frames Simulation:
http://css.nu/exp/nf-illustration.html
It works beautifully with Gecko based browsers and Opera.
IE's support of CSS is just not good enough.

Gus

P.S. I also see all messages in the same thread.

Bob

unread,

Apr 11, 2003, 11:11:45 AM4/11/03

to

On Fri, 11 Apr 2003 14:44:42 +0200, "Cybarber" <luc...@emergo.nl>
wrote:

>body{margin:0;border-style:none;padding:0;overflow:hidden;font-weight:1em;}
>#headerpart {position:absolute;top:0;left:0;width:100%;height:15%;background:yellow;overflow:auto;font-weight:1em;}
>#bodypart {position:absolute;top:10%;left:0;width:100%;height:85%;background:steelblue;overflow:auto;font-weight:1em;}

Cybarber:

tx very much for your reply; although the reply seemed to look a
little garbled, I extracted the important part.

Yes, your solution works - but ONLY with mozilla/netscape UA's!!!!
it still doesn't work with IE!!!!! (at least not v6.x - haven't tried
earlier - not that that point should matter)

This is apparently going to be my sticking point. If a solution
doesn't work with both netscape-esq, AND IE ua's - it's never going to
be on any of my sites.

the more I learn about css, the more I like the CONCEPT. - In PRACTICE
- it's worthless until it works with IE. (that's 75%++ of the ua's out
there!!!!!)

looks like FRAMES are the way to go for the forseeable future!!!

YEA for frames! - Long live frames!! ;o) !!!!!!
tx again - Bob

Bob

unread,

Apr 11, 2003, 11:17:11 AM4/11/03

to

On Fri, 11 Apr 2003 15:51:22 +0300, Stanimir Stamenkov
<sta...@notvalid.net> wrote:

>> ne-way - tx again; curious to hear how people can promote css, when it
>> doesn't work in IE!!
>>
>
>IE has some limitations. The first proposed example would
>work if you use absolute content dimensions.

Stanimir;

you are correct; the example you gave works just fine in IE.
unfortunately, I feel that IE is too limiting in order to make things
work.

for this exercise, my parameters require the body to span the entire
area of the ua, minus a small area for the header...

your solution works, but forces a specified dimension around the data
box.

is there anyway to solve this that works with both [popular] ua's, AND
doesn't require explicit limits on the size of the "data" box?

tia - (again, and again :) Bob

Bob

unread,

Apr 11, 2003, 11:32:07 AM4/11/03

to

On Fri, 11 Apr 2003 10:15:11 -0400, Richter <rich...@golden.net.Gus>
wrote:

>
>This last example just does not cut it.
>
>An example of pure CSS - Frames Simulation:
> http://css.nu/exp/nf-illustration.html
>It works beautifully with Gecko based browsers and Opera.
>IE's support of CSS is just not good enough.
>
>Gus
>
>P.S. I also see all messages in the same thread.
>
>

Gus;
tx very kindly for your input.

the example you gave has to be one of the BEST (and beautiful)
implementation of frames-like behavior in css I've seen.

it was truly a site to see - IN MOZILLA !!!!

when I looked @ it in IE - the result didn't even bear a resemblance
to what was obviously the intended appearance of the page.

unless I'm mistaken - this thread is really becoming - "WHY are frames
evil?" not - howto; I do this - but because IE's support of css is
severely lacking.

it's becoming more & more clear that frames is the only truly
compatable solution to my problem. So why are they evil? - it's the
ONLY WAY to do this RIGHT - for the majority of ua's....

tia - Bob

Stanimir Stamenkov

unread,

Apr 11, 2003, 11:15:49 AM4/11/03

to

Bob wrote:

> On Fri, 11 Apr 2003 15:51:22 +0300, Stanimir Stamenkov
> <sta...@notvalid.net> wrote:
>
>>> ne-way - tx again; curious to hear how people can promote css, when it
>>> doesn't work in IE!!
>>
>> IE has some limitations. The first proposed example would
>> work if you use absolute content dimensions.
>

> you are correct; the example you gave works just fine in IE.
> unfortunately, I feel that IE is too limiting in order to make things
> work.
>
> for this exercise, my parameters require the body to span the entire
> area of the ua, minus a small area for the header...
>
> your solution works, but forces a specified dimension around the data
> box.
>
> is there anyway to solve this that works with both [popular] ua's, AND
> doesn't require explicit limits on the size of the "data" box?

The only other thing I could mind of is to use script to gather the
dimensions of the containing body run-time and then to set these on
the corresponding elements.

--
Stanimir <stanio(_at_)gbg.bg>

Bob

unread,

Apr 11, 2003, 7:54:59 PM4/11/03

to

On Fri, 11 Apr 2003 18:15:49 +0300, Stanimir Stamenkov
<sta...@notvalid.net> wrote:

somehow - I KNEW you were going to say that!!! ;)

I always knew that was an option, but frankly, if we're talking about
spending an hour writing client-side code, and debugging all for the
sake of avoiding frames - when those frames would meet the need, and
only take 5 minutes to put together - FRAMES WIN! - FRAMES WIN!!!

Stanimir - tx SO MUCH for your replies - I've really learned quite a
bit. I've learn that css WILL be something VERY NICE to work with -
when IE supports it!!!

tx again - Bob

Cybarber

unread,

Apr 12, 2003, 2:45:17 PM4/12/03

to

My message was in HTML and created in OE6/IE6 If you couldn't see the
message in your OE6 browser you better check your set up as something is
wrong on your side.

Cybarber

"Bob" <nospa...@starnetwx.net> schreef in bericht
news:udmd9vo8gb19f6723...@4ax.com...

Cybarber

unread,

Apr 12, 2003, 2:58:15 PM4/12/03

to

"Cybarber" <luc...@emergo.nl> schreef in bericht news:OWMm9kCA...@TK2MSFTNGP11.phx.gbl...

"Cybarber" <luc...@emergo.nl> schreef in bericht news:uX2migC...@TK2MSFTNGP10.phx.gbl...

#headerpart {

BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH: 90%; POSITION: absolute; TOP: 0px; HEIGHT: 15% }#bodypart {
BACKGROUND: steelblue; LEFT: 10%; OVERFLOW: auto; WIDTH: 90%; POSITION: absolute; TOP: 15%; HEIGHT: 75% }#sidepart {
BACKGROUND: springgreen; LEFT: 0; OVERFLOW: hidden; WIDTH: 10%; POSITION: absolute; TOP: 0%; HEIGHT: 100% }

#bottompart {
BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH: 90%; POSITION: absolute; bottom: 0; HEIGHT: 10%}

#headerpart { BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH: 90%; POSITION: absolute; TOP: 0px; HEIGHT: 15% }
#bodypart { BACKGROUND: steelblue; LEFT: 10%; OVERFLOW: auto; WIDTH: 90%; POSITION: absolute; TOP: 15%; HEIGHT: 75% }
#sidepart { BACKGROUND: springgreen; LEFT: 0; OVERFLOW: hidden; WIDTH: 10%; POSITION: absolute; TOP: 0%; HEIGHT: 100% }

#bottompart { BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH: 90%; POSITION: absolute; bottom: 0; HEIGHT: 10% }

Cybarber

unread,

Apr 12, 2003, 3:00:25 PM4/12/03

to

View these emails with OE6 or vieew the source to see how you have to do
it.
As you are using Agent forte you are missing the point.

Cybarber

"Bob" <nospa...@starnetwx.net> schreef in bericht
news:udmd9vo8gb19f6723...@4ax.com...

PeterMcC

unread,

Apr 13, 2003, 8:46:36 AM4/13/03

to

Cybarber wrote:
> My message was in HTML and created in OE6/IE6 If you couldn't see the
> message in your OE6 browser you better check your set up as something
> is wrong on your side.

Some perhaps don't expect to encounter HTML in non-binary groups and so
their readers are not set up for such eventualities.

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

Bob

unread,

Apr 13, 2003, 9:50:59 AM4/13/03

to

I'm not using a browser, I'm using Agent - which is a newsgroup client
application.

Agent - at least the version I'm using doesn't display html.

Bob

On Sat, 12 Apr 2003 20:45:17 +0200, "Cybarber" <luc...@emergo.nl>
wrote:

Bob

unread,

Apr 13, 2003, 9:58:22 AM4/13/03

to

I may indeed be missing the point; however, the gibberish that I see
as the body for your message will not do a thing in OE or IE other
that display exactly as agent shows it.

while I can see some html/style like code in the body; it is nowhere
near tagged or formatted to be correctly rendered in a browser.

if you would care to email this to me (subract the nospam_ ); I'd be
very happy and appreciative to check it out again....

Bob

On Sat, 12 Apr 2003 21:00:25 +0200, "Cybarber" <luc...@emergo.nl>
wrote:

Cybarber

unread,

Apr 13, 2003, 11:55:42 AM4/13/03

to

You should be a bit more serious.
As said before, use OE to view this thread and you will see a perfect
example (my message of 20:58 April12th)
Your confusing, your complaints, the "gibberish" you see is solely due to
you NOT using OE as newsreader for the RTF messages I posted.

Cybarber

"Bob" <nospa...@starnetwx.net> schreef in bericht

news:s0ri9vschd0cg83o0...@4ax.com...

Cybarber

unread,

Apr 13, 2003, 11:59:06 AM4/13/03

to

On the Microsoft Newsserver one can use both RTF(htmL) and plaintext message
in whatever newsgroup.
It is really silly if one is talking about an HTML problem and one should
not be able to give the solution in a realtime example.

A picture is always better then a thousand words.

Cybarber

"PeterMcC" <pe...@mccourt.org.uk> schreef in bericht
news:PZcma.6798$xd5.2...@stones.force9.net...

Cybarber

unread,

Apr 13, 2003, 12:08:18 PM4/13/03

to

Below twice the sourcetext of this message to fill up the body part so that it displays it scrollbars.

<HTML><HEAD>
<Title>Four Container (Header, footer, sidebar and body) demo for Bob in plaintext as he is too stubborn to use OE as email client</Title>
<STYLE>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none

}
#headerpart {
BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH: 90%; POSITION: absolute; TOP: 0px; HEIGHT: 15%
}
#bodypart {
BACKGROUND: steelblue; LEFT: 10%; OVERFLOW: auto; WIDTH: 90%; POSITION: absolute; TOP: 15%; HEIGHT: 75%
}
#sidepart {

BACKGROUND: springgreen; LEFT: 0px; OVERFLOW: hidden; WIDTH: 10%; POSITION: absolute; TOP: 0%; HEIGHT: 100%
}
#bottompart {
BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH: 90%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 10%
}
</STYLE>
</HEAD>

</BODY></HTML>

Repeating the fillup content.

<HTML><HEAD>
<Title>Four Container (Header, footer, sidebar and body) demo for Bob in plaintext as he is too stubborn to use OE as email client</Title>
<STYLE>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none

}
#headerpart {
BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH: 90%; POSITION: absolute; TOP: 0px; HEIGHT: 15%
}
#bodypart {
BACKGROUND: steelblue; LEFT: 10%; OVERFLOW: auto; WIDTH: 90%; POSITION: absolute; TOP: 15%; HEIGHT: 75%
}
#sidepart {

BACKGROUND: springgreen; LEFT: 0px; OVERFLOW: hidden; WIDTH: 10%; POSITION: absolute; TOP: 0%; HEIGHT: 100%
}
#bottompart {
BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH: 90%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 10%
}
</STYLE>
</HEAD>

</BODY></HTML>

Cybarber

unread,

Apr 13, 2003, 12:10:08 PM4/13/03

to

<HTML><HEAD><TITLE>Four Container (Header, footer, sidebar and body) demo
</TITLE>

<STYLE>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px;
OVERFLOW: hidden; BORDER-TOP-STYLE: none; PADDING-TOP: 0px;
BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}

#headerpart {
BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH: 90%; POSITION:
absolute; TOP: 0px; HEIGHT: 15%
}
#bodypart {
BACKGROUND: steelblue; LEFT: 10%; OVERFLOW: auto; WIDTH: 90%; POSITION:
absolute; TOP: 15%; HEIGHT: 75%
}
#sidepart {

BACKGROUND: springgreen; LEFT: 0px; OVERFLOW: hidden; WIDTH: 10%; POSITION:

absolute; TOP: 0%; HEIGHT: 100%
}
#bottompart {

BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH: 90%; BOTTOM: 0px;
POSITION: absolute; HEIGHT: 10%
}
</STYLE>

</HEAD>
<BODY bgColor=#ffffff>

Bob

unread,

Apr 15, 2003, 9:07:52 AM4/15/03

to

On Sun, 13 Apr 2003 18:10:08 +0200, "Cybarber" <luc...@emergo.nl>
wrote:

><HTML><HEAD><TITLE>Four Container (Header, footer, sidebar and body) demo
></TITLE>

Cybarber:

tx for your indulgence!

your example works on both moz & ie -

however - you accomplish this by creating a box(s) with defined
limits. In doing this, any scroll bar that appears on a scrollable
window - is a "sub-scrollbar" to the whole document.

I don't know how to properly explain this; and I'm sure that many will
think I'm nuts...

if you use a "sub-scrollbar" - wheel-mouses do not always work
correctly. - particularily in mozilla.

I was trying to accomplish this task without confining the box limits,
and be able to use the "default" or "root" scrollbar - which ALWAYS
works with the wheel mouse.

I'm sure my terminology is wacked; but I hope you understand the
intent.

Bob

Cybarber

unread,

Apr 15, 2003, 7:45:12 PM4/15/03

to

There is no other way in non-Mac IE as Position:fixed is not supported.
A workaround for IE can be made using script (JScript expression on CSS
elements for instance).

You have an option to use so-called "condional comments" sothat you can make
a IE and an non-IE version.
look for conditional comments on the MSDN site.

In general, I think you are making things too difficult for yourself and you
waist a lot of time if for 1 or 2 % of the internautors using Moz or Netc.
If Mozilla mousewhell doesn't work well you should complain to Mozilla.

Cy

"Bob" <nospa...@starnetwx.net> schreef in bericht

news:8e0o9v84f667b31rf...@4ax.com...

Bob

unread,

Apr 15, 2003, 9:15:33 PM4/15/03

to

On Wed, 16 Apr 2003 01:45:12 +0200, "Cybarber" <luc...@emergo.nl>
wrote:

>There is no other way in non-Mac IE as Position:fixed is not supported.
>A workaround for IE can be made using script (JScript expression on CSS
>elements for instance).
>
>You have an option to use so-called "condional comments" sothat you can make
>a IE and an non-IE version.
>look for conditional comments on the MSDN site.

your points are well taken - although rather than develop 2 versions
I'll stick w/ frames & wait ( & hope) for :fixed support in IE.

I'm discovering IE doesn't support any of the css-table features
either... hard to believe they led in css support early on!! :)

>
>In general, I think you are making things too difficult for yourself and you
>waist a lot of time if for 1 or 2 % of the internautors using Moz or Netc.
>If Mozilla mousewhell doesn't work well you should complain to Mozilla.
>
>
>Cy

my stats show about 70% ie ua's; 25% mozilla/netscape users. so those
are the 2 I'm trying for compatability. Don't have access to a mac-IE;
so I can only hope there....

tx again for all your help! - Bob

Cybarber

unread,

Apr 16, 2003, 5:09:26 AM4/16/03

to

About two versions, it seems you do not understand what you can do with
"conditional
comments",(http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment
_ovw.asp ) like I said brush up your knowledge(check into MSDN Library
http://msdn.microsoft.com/workshop/index/)

In your case you just put make two versions of your stylesheet and you are
there, it is very easy.
Note: first conditional comment is for downlevel browser reveal (no --),
second conditional comment is for IE5 and Up
<![if !IE]>

<STYLE>BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px;
MARGIN: 0px; OVERFLOW: hidden; BORDER-TOP-STYLE: none; PADDING-TOP: 0px;
BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE:

none}#headerpart { .......................}#bodypart {
.......................}#sidepart { .......................}#bottompart {
.......................}</STYLE><![endif]><!--[if IE]>

<STYLE>BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px;
MARGIN: 0px; OVERFLOW: hidden; BORDER-TOP-STYLE: none; PADDING-TOP: 0px;
BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE:
none}#headerpart { BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH:
90%; POSITION: absolute; TOP: 0px; HEIGHT: 15%}#bodypart { BACKGROUND:
steelblue; LEFT: 10%; OVERFLOW: auto; WIDTH: 90%; POSITION: absolute; TOP:
15%; HEIGHT: 75%}#sidepart { BACKGROUND: springgreen; LEFT: 0px; OVERFLOW:
hidden; WIDTH: 10%; POSITION: absolute; TOP: 0%; HEIGHT: 100%}#bottompart
{ BACKGROUND: yellow; LEFT: 10%; OVERFLOW: hidden; WIDTH: 90%; BOTTOM: 0px;
POSITION: absolute; HEIGHT: 10%}</STYLE>

<![endif]-->

"Bob" <nospa...@starnetwx.net> schreef in bericht

news:mebp9vsb006jg469p...@4ax.com...

Bob

unread,

Apr 16, 2003, 12:33:04 PM4/16/03

to

fasinating - I really didn't think that thru very far...
VERY interesting idea; It's worth looking further into...

tx! - Bob

On Wed, 16 Apr 2003 11:09:26 +0200, "Cybarber" <luc...@emergo.nl>
wrote:

HOWTO: create a non-scrolling header, with a scrolling (auto) body - Can this even be done?

Bob

Timo Virkkala

Bob

Bob

Stanimir Stamenkov

Bob

Bob

Stanimir Stamenkov

Bob

Cybarber

Cybarber

Stanimir Stamenkov

Richter

Bob

Bob

Bob

Stanimir Stamenkov

Bob

Cybarber

Cybarber

Cybarber

PeterMcC

Bob

Bob

Cybarber

Cybarber

Cybarber

Cybarber

Bob

Cybarber

Bob

Cybarber

Bob