remove scrollbar at bottom of page

@dimpieJun 01.2003

Need some help with the following.

If a page does not fit on the screen, because it is too long, both a vertical and horizontal scrollbar appear on my screen.
The browser I’m using is I.E. 6.0. I remember from an earlier version (I.E. 5.x) that the horizontal scrollbar didn’t show up.

Is it possible to get rid of the horizontal scrollbar?
And does it work the same for IE and NS?

To see what I mean you can have a look at ~~[URL=http://home.hetnet.nl/~j.e.dijkstra/]~~My website[/URL], and click on the link ‘Activiteiten’.
By the way the resolution of my screen is 600*800 pixels.

Dimpie.?

to post a comment

JavaScript

12 Comments(s) _↴

@gil_davisJun 01.2003 — #IE 6 is a more standards compliant browser than earlier versions. That may be the difference. In reality, your page may have been displayed incorrectly in earlier versions according to W3C recommendations.

A valid way to stop the scroll bars is to use CSS. Place this bit of code in the HEAD section of your page:

&lt;style type="text/css"&gt;
 BODY {overflow: hidden}
 &lt;/style&gt;

Your scroll bars will/should dissappear in any W3 compliant browsers.

@dimpieauthorJun 02.2003 — #I put the code in the head section of my html page, as you told me to, but it still doesn't work.

I forgot to mention that the page I was talking about is being loaded in a frameset, and that's when both the vertical and the horizontal scrollbar are visible. I did some extra testing and I found out that when I have a page that exceeds the length of the screen and it is loaded outside the frameset, only the vertical scrollbar is visible as it should.

Is there another way to get rid of the horizontal scrollbar?

@pyroJun 02.2003 — #To only remove the horizontal scrollbar, try this:

&lt;style type="text/css"&gt;
 body {
 overflow-x:hidden;
 }
 &lt;/style&gt;

@dimpieauthorJun 02.2003 — #Sorry Pyro, but that doesn't work either.

I've put the code that you gave me between the <head> tags, as you can see when you view the source code.

Please have a look at the [URL=http://home.hetnet.nl/~j.e.dijkstra/testscrollbar/]Testsite[/URL], and click on the link 'Activiteiten'.

Is there another way to achieve what I want, or am I doing something wrong?

@yardleybatesJun 02.2003 — #you can try adding it as part of the body tag

<body style='overflow-x:hidden;'>

you can take a peek at this if you like:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/modcore/html/deovrWorkingWithObjectsCollections.asp

[i]visible[/i] Default. Content is not clipped and scroll bars are not added.

[i]scroll[/i] Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.

[i]hidden[/i] Content that exceeds the dimensions of the object is not shown.

[i]auto[/i] Content is clipped and scrolling is added only when necessary.

I find it has great DHTML info (at least for a newbie like me

? )

@dimpieauthorJun 05.2003 — #Hi Gil, Pyro, Yardley,

I found out that the overflow hidden-attribute works for the [B]body[/B] scrollbars, however these are not the scrollbars I was referring to.

I've created different examples, where you can see which scrollbars are being affected by the overflow atrributes 'hidden' and 'scroll'.

I also found a workaround, which removed the horizontal scrollbar, at the bottom of my screen.

Please take a look at [URL=http://home.hetnet.nl/~j.e.dijkstra/scrollbar2]the examples[/URL], cause it took me quite a long time to make this.

If you have a better solution please let me know.

Thanks for your help.

Dimpie.?

@pyroJun 05.2003 — #For you overflow: hidden page, you had

&lt;style type="text/css"&gt;
 {body
 overflow-x:hidden;
 overflow-y:hidden}
 &lt;/style&gt;

when you should have had:

&lt;style type="text/css"&gt;
 body {
 overflow-x:hidden;
 overflow-y:hidden
 }
 &lt;/style&gt;

Note the position of the opening {

@dimpieauthorJun 05.2003 — #Thanks,

:o

I've corrected the code.

It didn't make a difference though.

@TBorJun 06.2003 — #I've seen this before, and here's what I did:

You get both vertical & horizontal scrollbars because when the page within the frame gets too long, the vertical scrollbar is added, and if the width of that scrollbar adds enough width to your page to make it wider than the frame, you'll get the horizontal scrollbar.

You can make sure that the horizontal scrollbar doesn't come up by making your frame a little wider to accomodate the width of the vertical scrollbar, should it ever appear.

I'd also recommend enclosing that entire page you're displaying in the frame within a <table> with a fixed width, like so:

<table width=500 style="table-layout: fixed">

<tr width=500><td>

...

...

page data goes here

...

...

</td></tr>

</table>

That way, you can ensure that the width of your page stays the same. Without the table, the data you're displaying will by default stretch to the right edge of the frame, and if the page gets longer than the frame and the vertical scrollbar is added, your page will also become too wide for the frame.

Hope this helps,

TBor

@dimpieauthorJun 10.2003 — #I placed the body content inside a table with the specifications as you showed me in your example.

I'm sorry I can't get it to work.

Please have a look at [URL=http://home.hetnet.nl/mr_15/201/j.e.dijkstra/scrollbar2/]my testsite[/URL] and click on the link [B]Scrollbar (table)[/B].

? Maybe I've done something wrong. Please let me know.

Dimpie.

@TBorJun 20.2003 — #Took a look at your page:

Make sure that, on your menu page (navigatie) that you can the width of the table specified in your <table> tag, along with the Style="table-layout:fixed" statement. Also, specify the width in each <td> tag. See my example in my last post.

Also, you may want to consider specifying the width of your menu frame in the <frameset> tag in terms of pixel width, not percent. That way, the width of your menu frame stays constant even if the viewer's screen resolution changes.

For example, try setting the Cols property in your <frameset> tag to "300" (rather than 22%). Set the Width property of your <table> tag in your menu page to "280" and see what the result is. If the width of your table is always slightly less than the width of the frame it is in, you will never see the horizontal scrollbar. I find that about 20 pixels smaller usually does the trick.

I've attached an example for you to look at that will give you a better idea (extract all files to the same directory, run Frames.html). Hope it works for you!

TBor

[upl-file uuid=63149555-2aed-4874-b427-7e59f8d0dfcf size=795B]framesexample.zip[/upl-file]

@dimpieauthorJun 20.2003 — #Thank you for the example file. I tried it right away.

I got very frustrated that it still didn't work, while in the example you've send me it works just fine.

So I started stripping my webpages so I was sure that there was nothing left that could influence the scrollbars.

At last I found out that there was still one difference and that were the doctype ceclarations in my pages.

In my index page (framepage) I use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

and in the contentpages I use:

[B]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/B]

And the last one is what causes the horizontal scrollbar to appear.

After putting this doctype declaration in your example file 'mainpage.html', the horizontal scrollbar appeared also.

Please try it yourself and let me know what your conclusion is.

Thank you very much for your help.

? Dimpie

Also in #JavaScript _↴

Slide Nav Problems document.Write problem with formatted string Reseting the value of a textbox dynamically

Success!

Help @dimpie spread the word by sharing this article on Twitter...

Tweet This

remove scrollbar at bottom of page

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

remove scrollbar at bottom of page

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴