I have a fixed-width content area using margin:0 auto to keep it centered and a repeating background that fills the whole page. Nothing should cause the browser to use a horizontal scrollbar, unless the browser is less than browser is less than the fixed-width content. In IE however, a horizontal scrollbar is present and allows me to scroll slightly to the right which displays a 'gap' that appears to be the width of the vertical scrollbar. Curious as to why this is happening.
I have searched far and wide and found people with similar problems, but most discussion is regarding tables or other specific elements causing the problem that are not present on my page.
See link for example, open in IE8 and scroll right. Any help is appreciated.
http://finchsbrasserie.com/test_new_site/
Why don't you set the div css propety as overflow-x:hidden
Related
I've made rock paper scrissor game using html,css and js.When window is resized to small, some left portion of the page disappears .Using horizontal scrollbar i can scroll to right but not left.
I've checked for absolute positionings and negative margin but none worked.
What should i try ?
I expect to get entire page without any portion getting clipped off.
Hard to answer this without the code, but I would use devtools first to see what margins are being applied. You can look at the box model for each element in your dom and see what is being applied. Also, how small are you resizing? Do you have any explicit widths? If you are sizing down to 200px, but you have a div that is 250px, it clearly is going to have overflow. Devtools can also help with analyzing different devices too. Use the tool to set a size and see how your page responds, you can change the width of elements in the devtools to see if it removes the overflow.
I'm trying to get rid of the scrollbar for this website. The problem is, there is a scrollbar even though there is no visible content on the bottom. I tried body/html margin:0 but it didnt work. Any idea what I'm doing wrong?
There are two scrollbars, i need the main one (on the right) to behave normally, show only when it is actually needed.
I dont want to use overflow:hidden, because on smaller devices i need the scrollbar.
It could be due to the sizing of your background image. Try resizing it.
Whenever I have content that expands the page height, a scrollbar appears on my rendered website. However, the scrollbar pushes my content to the left by the width of the scroll bar so when I navigate to a page where the height is less then the page height, there's a noticeable jump as the page width resizes. Is it possible to have the scrollbar sit on top of all my html content? Similar to how scrolling works in Chrome on iOS.
Ideally a css property like overflow:absolute where the scrollbar appears and the content isn't clipped would be the best but I know that doesn't exist.
EDIT:
In the image below, you can see that the scrollbar has a white background and has pushed my html content to the left. What I want is the html content to be underneath the scrollbar, as if the scrollbar had absolute positioning to the right.
I conferred with one of my colleagues who's running the same version of chrome as I am and his scrollbar does exactly what I want. Maybe AB testing on Google's part?
There is no reliable cross-browser way to do what you're looking for.
Different browsers handle the scrollbar differently -- some (including Safari and some versions of Chrome) already do exactly what you want, most others enforce a particular background-color and width for the scrollbar (not always the same width) and push the content over to make room. Any negative-margin or width-greater-than-100% trickery will either not work at all or will put some of your content underneath a non-transparent scrollbar in many browsers (and offscreen in others).
If the 'jump' when the scrollbar appears is too distracting, you can force the scrollbar to always be present with overflow-y:scroll.
Native scrollbar styling is limited, but here is a demo of how to do it:
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
http://codepen.io/zakkain/pen/phjBC
Chrome and IE respond to it very well. Firefox not so much, the issue is logged here https://bugzilla.mozilla.org/show_bug.cgi?id=77790 and is stale.
If you want firefox, you'll have to go with a custom scrollbar replacer.
And how to compensate for scrollbar is explained here: How to compensate for Vertical Scrollbar when it is not yet present
It works well, but most code pens can't show it, so you'll have to experiment on your own.
This is the OSX disappearing scrollbar issue (not sure if it's relevant for modern versions of OSX): CSS - Overflow: Scroll; - Always show vertical scroll bar?
As it would turn out, all I had to do was update my version of OSX...baffling. I'll accept #DanielBeck's answer because it's a reasonable answer to a coding question whereas here, the solution was to arbitrary update my laptop software.
Having some trouble with a website. For some reason, there is a horizontal scroll-bar appearing allowing you to scroll a lot towards the right in IE8 even though there is no content there. I may have messed up with width's or margins or something, but it doesn't make sense because when I load the code outside of SharePoint it works fine, even in IE8. In SharePoint, inside a content editor web part, the code makes the horizontal scroll bar (although it doesn't appear in Chrome even with SharePoint).
The following code will hide the scrollbar for me, but you can still scroll to the right. The code just makes the scrollbar invisible.
html {
overflow-x: hidden;
}
Any other solutions would be very much appreciated.
In SharePoint 2010 the main content of the page resides inside s4-workspace Div and the ribbon is kept fixed at the top. So may be you can try to give the overflow attribute to s4-workspace div.
Know problem:
Scrollbar is shrinking width of page and elements center using margin:auto are moving.
Tests:
I checked it on few computers and get surprising results. On some of them layout isn't moving.
Regardless of browser(if problem is appearing it affect all browsers if not all browsers are fine).
It doesn't matter if it is ios or windows (the same like with browsers).
Question:
Why only few computers are affected?
PS.
I checked scroll setting they are the same.
jsfiddle:
http://jsfiddle.net/ujDZv/
screenshot:
http://jsfiddle.net/YcmT9/4/