Web Design Forums

Stickman · 27-07-2003, 12:17

What is the correct way for a browser to handle scrollbars?

A layout I'm currently working on has a float:right div which sits in the correct place in all the browsers I've tested it with when the content is shorter than the browser page. If you see what I mean.

When more content is added (or if it's viewed on a smaller res), the scrollbar appears and the div stays in the same place in all browsers except mozilla. In mozilla, the float:right div is pushed to the left by a distance the width of the scrollbar. So the floated div is being positioned in relation to the inside edge of the scrollbar, but everything else isn't - which buggers up the layout.

What do you people know about this? Is there anyway to override this in mozilla?

smallbeer · 27-07-2003, 13:18

It's been reported as a bug in Bugzilla - http://jerbaker.dhs.org/mozilla/voting/Bug72540.html

The only attempt to override it I've seen is this

Code:

body {
overflow: -moz-scrollbars-vertical;
}

but that only adds a scrollbar to the height of the content, not the window so is pretty much useless.

Stickman · 27-07-2003, 13:29

Yep, that code does nothing to help.

Cheers anyway though - and thanks for the link. I got to read a bit of info and vent my anger by voting (with real passion) against mozilla's scrollbar bug.

smallbeer · 27-07-2003, 13:53

Just tried the same code with

Code:

html,body {
height: 100%;
}

and it's better. Not perfect but better.

Stickman · 27-07-2003, 16:36

Cheers Jamie.

I've figured out a possible fix from your 100% idea.

Putting 100% in the body didn't work (but made sense), so I measured the page height at my largest resolution - 1280x1024 - and put that instead:

Code:

body {
height:860px;
}

Just tried it in moz 1.3 on my system and it works on all resolutions, but it may not work on huge screens - when the browser window is more than 860 in height. I dunno.

smallbeer · 27-07-2003, 16:47

It worked for me. See here

Stickman · 27-07-2003, 16:55

The scrollbar did appear with body {height:100%} in the stylesheet, but it made no difference to the layout. When I measured the height and put 100% as a pixel measurement it worked.

Weird but true.

smallbeer · 27-07-2003, 18:48

Quote:

Originally posted by Stickman
Weird but true.

Quote of the week for css lovers everywhere.

27-07-2003, 12:17	#1 (permalink)
Stickman Dr. Lucien Sanchez Join Date: Mar 2003 Location: UK Posts: 5,625	Scrollbars as page elements What is the correct way for a browser to handle scrollbars? A layout I'm currently working on has a float:right div which sits in the correct place in all the browsers I've tested it with when the content is shorter than the browser page. If you see what I mean. When more content is added (or if it's viewed on a smaller res), the scrollbar appears and the div stays in the same place in all browsers except mozilla. In mozilla, the float:right div is pushed to the left by a distance the width of the scrollbar. So the floated div is being positioned in relation to the inside edge of the scrollbar, but everything else isn't - which buggers up the layout. What do you people know about this? Is there anyway to override this in mozilla?

27-07-2003, 13:18	#2 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,236	It's been reported as a bug in Bugzilla - http://jerbaker.dhs.org/mozilla/voting/Bug72540.html The only attempt to override it I've seen is this Code: body { overflow: -moz-scrollbars-vertical; } but that only adds a scrollbar to the height of the content, not the window so is pretty much useless. __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

27-07-2003, 13:53	#4 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,236	Just tried the same code with Code: html,body { height: 100%; } and it's better. Not perfect but better. __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

27-07-2003, 16:36	#5 (permalink)
Stickman Dr. Lucien Sanchez Join Date: Mar 2003 Location: UK Posts: 5,625	Cheers Jamie. I've figured out a possible fix from your 100% idea. Putting 100% in the body didn't work (but made sense), so I measured the page height at my largest resolution - 1280x1024 - and put that instead: Code: body { height:860px; } Just tried it in moz 1.3 on my system and it works on all resolutions, but it may not work on huge screens - when the browser window is more than 860 in height. I dunno.

27-07-2003, 16:47	#6 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,236	It worked for me. See here __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

27-07-2003, 13:29	#3 (permalink)
Stickman Dr. Lucien Sanchez Join Date: Mar 2003 Location: UK Posts: 5,625	Yep, that code does nothing to help. Cheers anyway though - and thanks for the link. I got to read a bit of info and vent my anger by voting (with real passion) against mozilla's scrollbar bug.

27-07-2003, 16:55	#7 (permalink)
Stickman Dr. Lucien Sanchez Join Date: Mar 2003 Location: UK Posts: 5,625	The scrollbar did appear with body {height:100%} in the stylesheet, but it made no difference to the layout. When I measured the height and put 100% as a pixel measurement it worked. Weird but true.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search