On Jan 6, 2006, at 11:59 AM, Tim Robertson wrote:
> Hi,
>
> I have created a CSS page with 3 main sections a little header,
> content, footer with white space around them all.
>
> I have managed to make it so the header & footer remain static, but
> the content scrolls if necessary. (so far it works on Mac IE 5.2,
> Firefox 1.0.6 and Safari 2.0.2
>
> The problem is the scrollbar for the content appears just within the
> content area itself, I would like to have it so it appears on the far
> right as a full, normal vertical scrollbar, any suggestions?
>
> A link to an example is at:
> http://www.m-2-design.com/Innovus/
>
> Thanks for any input
> Tim
Hi Tim.
I think the solution is to use position: fixed on the header and
footer. As you may well know, this works fine in Safari, Firefox and
Opera, but (as usual) IE doesn't support position: fixed.
However, you can trick IE into simulating position: fixed by
absolutely positioning them with respect to the html element and then
moving the scrolling mechanism to the body element.
I believe the code goes something like this:
/* Move the scrolling mechanism for IE */
* html { overflow: hidden; }
* body { height: 100%; overflow: auto; }
/* Set the positions */
#header { position: absolute; left: 0; right: 0; top: 0; }
#footer { position: absolute; left: 0; right: 0; bottom: 0; }
/* Fixed position for standards-compliant browsers */
html > #header { position: fixed; }
html > #footer { position: fixed; }
Check out this article on tagsoup for more info:
http://tagsoup.com/-dev/null-/css/fixed/
Good luck!
- Matthew Levine (http://www.infocraft.com/)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
