In IE9 overflow-y hidden removes all scroll bars - css

Is there any known reason overflow-y: hidden will remove all scroll bars in IE9?
I've put this in an IE9 only style sheet like this:
body,html {
overflow-x: auto !important;
overflow-y: hidden !important;
}


I'm a genius and had my x and y switched. For future developers that see this. Get sleep, it really helps.


The overflow: hidden property will hide any content that will flow out of the normal boundary of the elements box model. In this case you are setting it to the html, so anything that overflows will hide instead of having the scroll bars. Give this a try and see how this works:
html, body {
overflow-x: auto;
overflow-y: scroll;
}
Here is a great article on all the different overflow properties available and how they work: http://css-tricks.com/the-css-overflow-property/

Related

Horizontal overflow on mobile site

jsfiddle.net/etto2sdt/
What I'm trying to do is having a touch scrollable div. The body is set to 100% and I want to be able to scroll the contents inside #testnavwrapper
But it's not working... any ideas?

#testnavwrapper {
width: 100%;
overflow-x: scroll;
}
This will give you a horizontal scrollbar on the #testnavwrapper.
width: 2000px, as you put it, will have no effect as the overflow would occur on the body element (which has overflow set to hidden)
Hope it helps

CSS centering not working with margin auto and overflow hidden

I've noticed that if I view the page at wider resolution, the content of a section gets aligned to the right, instead of centered.
I use
margin: 0 auto;
width: 998px;
overflow: hidden;
It seems to have this bug, at least in Safari, Firefox and Chrome. I tried disabling overflow: hidden and it gets rid of the bug, but messes up my floats inside the content.
You can see an example at the page live here:
http://autouncle.dk/da/brugte-biler/Kia or http://autouncle.dk/da/brugte-biler/Ford (you have to view it at at least 1500px widescreen to see the bug).
Any ideas on what can cause this bug and what are possible solutions?

About the reason of the problem: this is due to the page-title element of your header:
#header-outer element contains some floated elements but you forgot a clearing, so the offset left of the main section of your site starts where the page-title ends. (you can verify this by hiding page-title element — when you set display: none the page is correctly centered)
So adding
body#basic_page #header-outer {
overflow: hidden;
}
you solve the problem
As a sidenote strongly avoid to put empty div only for clearing purposes: there're cleaner methods that don't require extra markup, like easyclearing

Your solution is removing overflow: hidden
To fix the float bug on the second example you gave try to use 100% of the width:
body#basic_page.brands_controller #content .text_info {
overflow: hidden;
font-size: 12px;
width: 100%; /* new rule */
}

Remove the
overflow:hidden
from div#content and put its contents in an extra <div> in it which has
width:100%;
overflow:hidden;
This resolves the problem for me.

CSS Disabled scrolling

I came across an issue with one of our web sites:
In IE9 the page had a vertical scrollbar, but you couldn't use the mousewheel, arrow keys, pgup/pgdwn to scroll. The only way to scroll was to actually click/hold and move the scrollbar.
I removed the following from the css:
{
overflow-x: hidden;
}
Then scrolling worked as usual. Has anyone else come across this? It seems odd as overflow-x should hide the horizontal scroll bar? Why would it effect the vertical?
I have tried this on a test page and it acts as expected. So it must be a combination of things.

Try using the following code snippet. This should solve your issue.
body, html {
overflow-x: hidden;
overflow-y: auto;
}

overflow-x: hidden;
would hide any thing on the x-axis that goes outside of the element, so there would be no need for the horizontal scrollbar and it get removed.
overflow-y: hidden;
would hide any thing on the y-axis that goes outside of the element, so there would be no need for the vertical scrollbar and it get removed.
overflow: hidden;
would remove both scrollbars

I use iFrame to insert the content from another page and CSS mentioned above is NOT working as expected. I have to use the parameter scrolling="no" even if I use HTML 5 Doctype

CSS Overflow: Hide it but keep text in it selectable

Basically, I need the overflow to behave like "auto", but hiding the scrollbar.
If I use "hidden" I cannot select the text beyond the limit.

try using something like this applied to the DIV that you want to control with scrolling.
#foo {
height: 100px;
overflow-y; scroll;
overflow-x: hidden;
}
If you really want to hide the scrollbar, then replace it with JS or CSS for a blank image?

Remove scollbar when no need to scroll

I have a div with a scollbar as a result of the CSS below. However, when there is no need to scroll, the bar is still there. There is no slider/arrows, but an emtpy bar is just there. Is there a way to only show the bar if the content overflows? Thanks.
#id{
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}

use
overflow: auto;
then overflow will only be displayed if it actually overflows
auto The behavior of auto isn’t specified in any detail in the CSS2.1
specification. In existing implementations it provides scrollbar(s)
when necessary, but it doesn’t show scrollbars unless the content
overflows the element’s box.
http://reference.sitepoint.com/css/overflow

Resources