Jump to content
xisto Community
Sign in to follow this  
Carsten

Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

Recommended Posts

I'm working on a website and a few minutes ago I got very tired from the Internet Explorer vertical scrollbar. This vertical scrollbar is always there, even if the length of the page does not require a vertical scrollbar. In this case, Internet Explorer will disable the scrollbar though not remove it. In my opinion this would be correct behaviour.

The disabled however not hidden scrollbar means that a switch between a preview of your website in Mozilla Firefox and MS Internet Explorer will lead to an annoying change of the location of your layout. To disable this annoying switch and to hide the vertical scrollbar when the scrollbar is disabled anyway, put the following CSS code in your stylesheet:

html {	overflow: auto;}
If you don't have a stylesheet yet, put this code in your html header:
<style type="text/css">html {	overflow: auto;}</style>

Not much code needed, huh :lol:

Share this post


Link to post
Share on other sites

Also, if your site it pushing it (like mine - beeseven.trap17.com - trying viewing it in IE and you get 2 scroll bars), but you know nothing goes offscreen that you need, you can use "overflow: hidden;" and it won't put the scroll bars there even if something goes off (or it thinks something does).

Share this post


Link to post
Share on other sites

my website has this code,..you've given but I'm still having no luck,...theres also a concern about hiding images when viewing with IE, does anyone have a good resource.heres my site that I need no scroll bars on the lower (frame, yea I hate frames too)redescape.net/dj_hertz/index.html -dave

Share this post


Link to post
Share on other sites

This suggestion is very helpful for those who are developing web application for both IE and Mozila Browser.Thanks Buddy.-Suresh Kumar Pathak

Share this post


Link to post
Share on other sites

That's pretty cool. I've been trying to find good tutorials on making stuff work for IE, like the position:fixed; thing, but a lot of them either take a lot of code, or they don't work.I think people should just stop using IE and all go to FF.But I guess I could use that on my pages for all the people that still use IE.

Share this post


Link to post
Share on other sites

When you think that the content doesn't even require a vertical scrollbar you might have used a iframe or a <div> with text in it that will exceed the total length...There just isn't a solution?!?...So you will have to learn to live with a vertical scrollbar. Is that it?I have used the html{overflow:hidden;} 'trick', but this doesn't' work in IE6 or IE7, only Mozilla browsers seem to get rid of the vertical scrollbar. To be sure I have put it in the external CSS and also inline in the <head> of my pages. But whatever I do there always is a vertical scrollbar...Is this just me?-Erick Schluter

Share this post


Link to post
Share on other sites

Erick - I was having no luck with html{overflow:auto;} either until I added it to the "body" in css:Html, body {Overflow:auto;}-Keith Bucklen

Share this post


Link to post
Share on other sites

Scrollbar goes away, but...

Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

 

Scrollbar goes away, but my DIVs go crazy with that CSS option... Is there any other way to remove that damned scrollbar?

 

-reply by Zorba

Share this post


Link to post
Share on other sites

A bit dirty but works ;-)SCROLLBAR-FACE-COLOR: #FFFFFF;SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;SCROLLBAR-SHADOW-COLOR: #FFFFFF;SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;SCROLLBAR-ARROW-COLOR: #000066;SCROLLBAR-TRACK-COLOR: #FFFFFF;SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;SCROLLBAR-BASE-COLOR: #FFFFFF;Piglet

Share this post


Link to post
Share on other sites

Try using this in the cssOverflow-y:hidden; (vertical scroll bar)Overflow-x:hidden; (hide horizontal scroll bar)-reply by mehreen

Share this post


Link to post
Share on other sites

works for me

Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

 

Overflow-y:hidden; (vertical scroll bar)

Overflow-x:hidden; (hide horizontal scroll bar)

 

^^ this worked perfectly for me.

 

-reply by tikistar

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.