Topic: CSS / position:fixed

Right, have been working on a site for a friend where the requirement is for a central scrollable content area surrounded by a fixed frame.

The easy option would be to have the content area scrollable, i.e. the central div having scrollbars, but I have been playing with the idea of having the *frame* components fixed so the normal body scroll bar can be used to scroll the cenral content and the mouse wheel scrolls where ever the cursor position, i.e. even when it is not hovering over the central content.

I used the ie 6 hack #div {position: absolute} body > div { position:fixed} with conditional comments [if ie6]

Great idea but a big can of worms.

1) ie 5x and less don't seem to support fixed position and the footer covers text.

2) width: 100% seems to be more than 100% and covers the scroll bar tracks unless positioned right:20px

3) when resizing the window horizontally the menu bar [fixed] gets covered and of course wont scroll. (also it sometimes jumps out of the screen in IE - some silly bug no doubt.

dohhh forgot to bring the code in - will post online tomorrow.

and finally my question - before I go any further should I just use a scrollable div rather than trying to fix the above issues???

Cheers

FR

quote:

---

FatRod said:

and finally my question - before I go any further should I just use a scrollable div rather than trying to fix the above issues???

---

Yes.

IMO the problems to overcome far outweigh any potential benefit.

/me waits to see code

I'm not 100% certain I'm understanding what you're wanting to do but I have a feeling that Paul O'Brien has you covered somewhere in one of the following:

Fixed header and footer for ie and moz:

• http://www.pmob.co.uk/temp/fixedlayoutexample2.htm
• http://www.pmob.co.uk/temp/fixedlayoutexample3.htm
• http://www.pmob.co.uk/temp/fixedlayoutexample4.htm
• http://www.pmob.co.uk/temp/fixed-centred.htm

New versions for standards mode:

• http://www.pmob.co.uk/temp/fixedlayoutexample5.htm
• http://www.pmob.co.uk/temp/fixedlayoutexample6.htm
• http://www.pmob.co.uk/temp/fixedlayoutexample7.htm
• http://www.pmob.co.uk/temp/fixedlayoutexample8.htm
• http://www.pmob.co.uk/temp/fixedlayoutexample9.htm
• http://www.pmob.co.uk/temp/fixedlayoutexample10.htm
• http://www.pmob.co.uk/temp/fixedlheader-footer-left.htm
• http://www.pmob.co.uk/temp/fixedleft-header.htm

For what it's worth there really seems to me to be no way to make a mouse's scrollwheel behave consistently across browsers with css. Not that I've delved too deeply into it but I do recall messing with it before and being frustrated.