CSS Scrollbars

[richkoi]

I am designing a layout in css for a new client. They want to have the content area scrolling which presents a problem because anyone with higher than 800x600 resolution will see a lot of white space. Ideally I would like the scroll area to adjust to the window height. So far, I have had to make a very restricted layout:

http://www.sandiegoborn.org/2005.htm

Any suggestions for improvement? Here is the css file:

http://www.sandiegoborn.org/born.css

Thanks,

Rich

[speed]

The only thing that comes to mind, is to remove the height from #mainspace now the site makes use of large display areas. Then create some JavaScript to set the height of #mainspace based on the height of the browser.

I've not tried this so I'll be interested if you have any joy with that.

For Firefox you can use:

.box {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
background-color:#CC9966;
overflow: auto;
}

Using that with a <div> makes the <div> change size to match the browser window and enables scroll bars as the window gets too small for the content. Needless to say it doesn't work in IE.

I have a high resolution display, a pet hate of mine is sites that only use a tiny area of the browser window, therefore if you can't change the height dynamically then I wouldn't fix the height.

The other small problem with scroll areas, or at least on my machines, is that the scroll wheel on the mouse doesn't scroll the area.

[leonievs]

hmm, can't you advise them not to have a scroll bar like that...?

more and more users are having bigger screens and will see a mini site and a lot of white...

users hate scrolling, especially disabled people, not experienced users or people with rsi complaints.

doe they have a special reason why they would want it like that?

[richkoi]

The reason they want it that way is so the nav bar stays in view at all time. Is there a way to make the nav bar track down the page as the user scrolls?

Thanks,

Rich

[speed]

Just found http://soiland.no/frames_with_css/ maybe you can do something with that?

http://www.stunicholls.myby.co.uk/layouts/fixed.html looks interesting too.

[ADAM Web Design]

Is this what you mean?

http://dhtml-menu.com/menu-demos/demo1973.html

Alternatively, you could do something like this:
[code]
#wrapper {
width: 100%; /* values for width and height pulled out arbitrarily. Replace as appropriate. */
height: 500px;
}
#header {
width: 100%;

}

[ADAM Web Design]

Like this for the menu?

http://dhtml-menu.com/menu-demos/demo1973.html

As far as a layout idea goes with a scrolling div, I've done something similar (but it doesn't quite fit into the body of the window because the background pic is too big):

http://www.durasystems.com

The base concept and most of the Javascript would be the same, though.

[richkoi]

I combined some of the tips above to create the following:

http://www.sandiegoborn.org/2005.htm
http://www.sandiegoborn.org/born.css

It works perfect in Firefox, other than a few pixels that need to be fixed, but IE refuses to give the wrapper the top margin that I need.

Is there a fix for this without messing up all the tweaks I've made to my css file?

Thanks,

Rich

[speed]

You can try changing margin-top to padding-top.

[ADAM Web Design]

You could try something like this:

#wrapper {
    margin-top:  (IE-only margin)
}
#wrapper[id] {
    margin-top:  (FF margin)
}

IE will ignore the #wrapper[id] properties, which is what you want.

[AccuraCast]

The design doesn't seem to be ideal for IE. If the window is resized, the user ends up with a static top and left frame and 2 scroll bars for the vertical content and the window itslef - Very confusing for users.

Have you tried just working with an ordinary
height: 100%; for the main body?

[lightning]

Another idea would be to center your page content so the white space on larger screens is shared between the left and right edges. Rather than left justify the page, this creates an effect that is much more pleasing to those with larger screens.

[lightning]

On a side note, I quickly looked at your logo and subconsciously registed the international 'NO' symbol ( the circle with a slash through it) over 'Born.'

I don't think this is the impression you're trying to give.

This is just an innocent observation.

[richkoi]

"international 'NO' symbol"

Hmmm, I'll let the site owners know about that.

I think I figured it out. Please have a look and see if anything looks funny:

http://www.sandiegoborn.org/2005.htm
http://www.sandiegoborn.org/born.css

Thanks,

Rich

[speed]

As accuracast said you get double scroll bars in IE which if nothing else looks strange.

In case you haven't seen it, make IE small so that you get both horizontal and vertical scroll bars, then scroll right as far as you can.

There's also a bug when using IE 6, if I make the browser window short then I can't always scroll with the scroll bar, instead I have to use the mouse wheel. Seems to be reproducible by viewing with a large window then dragging the browser window shorter.

The other point is I don't like the white space to the right of the page, could you go to a fluid layout? I would say center it but I don't think you can.

[richkoi]

Yeah, I can't center it as far as I can tell.

Is there any way to get rid of that double scroll bar? Where in the code is that coming from?

Thanks,

Rich