Ok. So this might sound a bit daft at first, but I'm getting a scroll bar I don't want when I set overflow:scroll; to a div that holds some text.I want a vertical scrol bar so people can scroll the winow containing the text, but I don't want a horizontal scroll bar there that serves no purpose at all. No horizontal scrolling is required from the div yet the bar is still appears.
Any ideas one how to get rid of it, or am I gonna have to do some considerable redesigning?
The link to it is <!-- w --><a class="postlink" href="http://www.vagusnet.com/ptest/index.php">www.vagusnet.com/ptest/index.php</a><!-- w -->
If you view it in FF or NN it has some padding that I have already tried removing to no avail. IE has no padding yet but still displays the same bar too (just greyed out).
Thanks in advance folks.
EDIT: Additional.
I've also just noticed that FF and NN do not scroll the div using the mouse roller button and that the div can only be scrolled by actually grabbing the scroll bar with the mouse and manually moving it.
Should I just give up now or is there some other way I can get an area to scroll it's contents so that it doesn't take up all the page that I haven't thought of yet ? (I don't want to use frames btw.)Originally posted by Mr Herer
Ok. So this might sound a bit daft at first, but I'm getting a scroll bar I don't want when I set overflow:scroll; to a div that holds some text.I want a vertical scrol bar so people can scroll the winow containing the text, but I don't want a horizontal scroll bar there that serves no purpose at all. No horizontal scrolling is required from the div yet the bar is still appears.
Set the overflow to auto.
Originally posted by Mr Herer
If you view it in FF or NN it has some padding that I have already tried removing to no avail. IE has no padding yet but still displays the same bar too (just greyed out).
Remove the padding from #mainContent. Place it in .contentBox. Get rid of the margins in .contentBox.
Originally posted by Mr Herer
I've also just noticed that FF and NN do not scroll the div using the mouse roller button and that the div can only be scrolled by actually grabbing the scroll bar with the mouse and manually moving it.
That's been brought up in Bugzilla, I think. Future versions of those browsers might support overflow scrolling. Right now they don't, so don't worry about it.
Originally posted by Mr Herer
Should I just give up now or is there some other way I can get an area to scroll it's contents so that it doesn't take up all the page that I haven't thought of yet ? (I don't want to use frames btw.)
There's no other way, and don't give up now. You've just got a few minor problems, that's all
Ah great stuff. I was sure ya didn't have to have pointless horizontal scroll bars if ya didn't want 'em.
Hope that mouse scrolling thing gets sorted soon too. I'd feel kinda bad serving up a minor inconvenience such as that to any users that went to the trouble of getting a browser to browse the internet with.In regards to the "not being able to scroll elements with overflow: auto applied" thing, I've noticed that. It's an extremely weird bug. I figured out that you can in fact scroll it, but there's a catch: there has to be an element within the element that you're trying to scroll that currently has focus. Check this example out:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
.scroll {
height: 15em;
width: 25em;
overflow: auto;
border: solid #000 1px;
padding: 1em;
}
</style>
</head>
<body>
<h1>Weird <code>overflow: auto</code> behavior</h1>
<div class="scroll">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="foo">foo</a>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
</div>
<ol>
<li>Try scrolling the above element with your mousewheel under Mozilla.</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#foo">Set focus to the link</a> and try again.</li>
</ol>
</body>
</html>That actually makes sense.
Normally the mouse scroller would scroll the browser window so you have to focus it on a particular element to scroll that element otherwise how would the browser know what you wanted it to scroll?Actually, just the cursor being over the element should be enough. Take for example an iframe:<iframe src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.com/"></iframe>Yeah i noticed when I first started using Fire Fox that I had to remove focus from things like text areas to be able to scroll the rest of the page and had to put focus back on them again manually every time I wanted to scroll them again.
I tried clicking the area I was trying to scroll in the state that it is in now but never actually brought focus to anything in the div so it just didn't scroll.
So Something as simple as an onmouseover document.whatever.focus() should do the trick?
Bit of a long shot here, but would it be possible to bring focus to a hidden form element? I'd rather not go automatically slapping that ugly dotted line over parts of the articles just to allow scroling.
Any ideas one how to get rid of it, or am I gonna have to do some considerable redesigning?
The link to it is <!-- w --><a class="postlink" href="http://www.vagusnet.com/ptest/index.php">www.vagusnet.com/ptest/index.php</a><!-- w -->
If you view it in FF or NN it has some padding that I have already tried removing to no avail. IE has no padding yet but still displays the same bar too (just greyed out).
Thanks in advance folks.
EDIT: Additional.
I've also just noticed that FF and NN do not scroll the div using the mouse roller button and that the div can only be scrolled by actually grabbing the scroll bar with the mouse and manually moving it.
Should I just give up now or is there some other way I can get an area to scroll it's contents so that it doesn't take up all the page that I haven't thought of yet ? (I don't want to use frames btw.)Originally posted by Mr Herer
Ok. So this might sound a bit daft at first, but I'm getting a scroll bar I don't want when I set overflow:scroll; to a div that holds some text.I want a vertical scrol bar so people can scroll the winow containing the text, but I don't want a horizontal scroll bar there that serves no purpose at all. No horizontal scrolling is required from the div yet the bar is still appears.
Set the overflow to auto.
Originally posted by Mr Herer
If you view it in FF or NN it has some padding that I have already tried removing to no avail. IE has no padding yet but still displays the same bar too (just greyed out).
Remove the padding from #mainContent. Place it in .contentBox. Get rid of the margins in .contentBox.
Originally posted by Mr Herer
I've also just noticed that FF and NN do not scroll the div using the mouse roller button and that the div can only be scrolled by actually grabbing the scroll bar with the mouse and manually moving it.
That's been brought up in Bugzilla, I think. Future versions of those browsers might support overflow scrolling. Right now they don't, so don't worry about it.
Originally posted by Mr Herer
Should I just give up now or is there some other way I can get an area to scroll it's contents so that it doesn't take up all the page that I haven't thought of yet ? (I don't want to use frames btw.)
There's no other way, and don't give up now. You've just got a few minor problems, that's all
Ah great stuff. I was sure ya didn't have to have pointless horizontal scroll bars if ya didn't want 'em.Hope that mouse scrolling thing gets sorted soon too. I'd feel kinda bad serving up a minor inconvenience such as that to any users that went to the trouble of getting a browser to browse the internet with.In regards to the "not being able to scroll elements with overflow: auto applied" thing, I've noticed that. It's an extremely weird bug. I figured out that you can in fact scroll it, but there's a catch: there has to be an element within the element that you're trying to scroll that currently has focus. Check this example out:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
.scroll {
height: 15em;
width: 25em;
overflow: auto;
border: solid #000 1px;
padding: 1em;
}
</style>
</head>
<body>
<h1>Weird <code>overflow: auto</code> behavior</h1>
<div class="scroll">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="foo">foo</a>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
<p>filler filler filler filler filler filler filler filler</p>
</div>
<ol>
<li>Try scrolling the above element with your mousewheel under Mozilla.</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#foo">Set focus to the link</a> and try again.</li>
</ol>
</body>
</html>That actually makes sense.
Normally the mouse scroller would scroll the browser window so you have to focus it on a particular element to scroll that element otherwise how would the browser know what you wanted it to scroll?Actually, just the cursor being over the element should be enough. Take for example an iframe:<iframe src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.com/"></iframe>Yeah i noticed when I first started using Fire Fox that I had to remove focus from things like text areas to be able to scroll the rest of the page and had to put focus back on them again manually every time I wanted to scroll them again.
I tried clicking the area I was trying to scroll in the state that it is in now but never actually brought focus to anything in the div so it just didn't scroll.
So Something as simple as an onmouseover document.whatever.focus() should do the trick?
Bit of a long shot here, but would it be possible to bring focus to a hidden form element? I'd rather not go automatically slapping that ugly dotted line over parts of the articles just to allow scroling.