CSS scrollbar problem
November 9, 2010 9:44 AM Subscribe
CSS Question: How can I enable scrolling on this website without creating a horizontal scrollbar and/or double vertical scrollbars?
Ideally I'd like the footer menu to dynamically move with the scroll too, otherwise there's not much point having it scroll.
I've been struggling with this for days and have posted at two CSS forums to no avail. One helpful person proffered "set footer at % width and overflow to hidden", but this obviously doesn't work. The code really needs trying locally, I'm afraid. Any and all help much appreciated!
the html
the css
Ideally I'd like the footer menu to dynamically move with the scroll too, otherwise there's not much point having it scroll.
I've been struggling with this for days and have posted at two CSS forums to no avail. One helpful person proffered "set footer at % width and overflow to hidden", but this obviously doesn't work. The code really needs trying locally, I'm afraid. Any and all help much appreciated!
the html
the css
Response by poster: Yes, I'm trying to get a fixed footer BUT my main question is the scrollbars. At the moment if I set overflow to 'auto' instead of hidden, as I say I get two vertical scrollbars and one horizontal. I only want just the ONE vertical scrollbar. I'll do as you suggest and pop the HTML/CSS up on a server.
posted by dance at 10:49 AM on November 9, 2010
posted by dance at 10:49 AM on November 9, 2010
Don't use width:100% and left:141px on the same element; that's what's causing the horizontal scrollbar. Instead set width:100% on #menu, and padding-left:141px on the child ul (the child div wrapped around that ul is unnecessary.)
Better still, remove both the position:absolute and width attributes from #menu altogether; they're not doing you any good. (In general you should try to avoid using position:absolute if at all possible. Absolute positioning should be a last resort; let the browser do the work for you.)
You also probably want to remove the min-width attribute from #page-wrap; it's doing more harm than good.
On preview: If you want a fixed, nonscrolling footer (locked to the browser viewport) you should be using position:fixed, not position:absolute.
posted by ook at 10:52 AM on November 9, 2010
Better still, remove both the position:absolute and width attributes from #menu altogether; they're not doing you any good. (In general you should try to avoid using position:absolute if at all possible. Absolute positioning should be a last resort; let the browser do the work for you.)
You also probably want to remove the min-width attribute from #page-wrap; it's doing more harm than good.
On preview: If you want a fixed, nonscrolling footer (locked to the browser viewport) you should be using position:fixed, not position:absolute.
posted by ook at 10:52 AM on November 9, 2010
Response by poster: My heartfelt thanks, ook, I'll try that and get back to you if things don't go to plan. But I just wanted to thank you here and now!
posted by dance at 10:59 AM on November 9, 2010
posted by dance at 10:59 AM on November 9, 2010
Also keep in mind that position:fixed doesn't work in ie6, so there's a bit of hackery to get it working cross-browser. (or, just use a conditional stylesheet and let ie6 users suck it.)
posted by mrgoat at 11:05 AM on November 9, 2010
posted by mrgoat at 11:05 AM on November 9, 2010
Response by poster: ook, when I remove position:absolute and width attributes from #menu, I lose the first component of the menu. This also happens when I set width:100% on #menu, and padding-left:141px. (couldn't find the child ul you mention in the style sheet).
Any ideas? Did your suggestions work at your end?
posted by dance at 11:38 AM on November 9, 2010
Any ideas? Did your suggestions work at your end?
posted by dance at 11:38 AM on November 9, 2010
Best answer: Ah, that's because you've got still more specific positioning on your h1 (the first element in the menu), so when the position:absolute above it goes away, it winds up offscreen because of the negative margins. A quick fix for that would be to remove the left: and position: attributes from the h1 and use float:left instead.
Remove lines 9-12 of your css, and replace them with this:
#menu{line-height:12px;}
#menu div{margin-left: 142px; height:66px;background:#808000;padding:7px 0 0 7px;}
h1 {width:140px;float:left;}
That would fix it for the inline case. (I used margin-left:142 instead of padding as I suggested earlier to retain the white border...) If you want a fixed footer, add position:fixed; width:100%; bottom: 0px to #menu.
In general, when in doubt in CSS, start by removing attributes, not adding more to patch over the problem. Over-reliance on position:absolute is a really common novice mistake; as you're seeing here it makes maintenance and debugging really difficult.
(couldn't find the child ul you mention in the style sheet).
Sorry, I see you're referencing it as #menu div in the stylesheet; you could as easily remove the extra div and hook the css onto #menu ul instead.
posted by ook at 12:25 PM on November 9, 2010
Remove lines 9-12 of your css, and replace them with this:
#menu{line-height:12px;}
#menu div{margin-left: 142px; height:66px;background:#808000;padding:7px 0 0 7px;}
h1 {width:140px;float:left;}
That would fix it for the inline case. (I used margin-left:142 instead of padding as I suggested earlier to retain the white border...) If you want a fixed footer, add position:fixed; width:100%; bottom: 0px to #menu.
In general, when in doubt in CSS, start by removing attributes, not adding more to patch over the problem. Over-reliance on position:absolute is a really common novice mistake; as you're seeing here it makes maintenance and debugging really difficult.
(couldn't find the child ul you mention in the style sheet).
Sorry, I see you're referencing it as #menu div in the stylesheet; you could as easily remove the extra div and hook the css onto #menu ul instead.
posted by ook at 12:25 PM on November 9, 2010
Response by poster: If you memail me your address, I would like to send you something - (something nice).
posted by dance at 12:34 PM on November 9, 2010
posted by dance at 12:34 PM on November 9, 2010
Happy to help. Postage alone would vastly outweigh the value of the few minutes I spent thinking about this, but thanks :)
posted by ook at 2:33 PM on November 9, 2010
posted by ook at 2:33 PM on November 9, 2010
This thread is closed to new comments.
I suspect you will get better responses if you throw your html and css up on a server somewhere -- most people can tear into it with Firebug/DOM Inspector/Web Dev toolbar, and don't actually need to download it locally to understand what you are asking or to propose solutions.
posted by misterbrandt at 10:45 AM on November 9, 2010