My footer is full width on some pages and on others it matches the content width. On pages where the footer is full width, a horizontal scroll bar appears. I'm not sure why this is happening and researched loads. Because every answer was associated with css, I decided to take all the css out just to see if there was something in the code that was causing it... but I'm baffled because even with all coding removed and refreshed, the horizontal bar still comes up on a few pages. Is it really css issue?
You can disable the horizontal scroll bar using css:
body {
overflow-x: hidden;
}
Related
I have a drop shadow (box-shadow) on my header element which runs 100% of the top of the page. I've added a CSS Pie to enable box-shadows in IE8 , but it seems like css pie has added a margin, or some spacing to the right of the header causing it to over flow and allowing the user to scroll to reveal empty margins.
I've tried setting overflow-x:hidden but that on the header, the child element and the parent and have also tried setting a position relative on the element but none of that actually works. Has any one else had this issue, and how were you able to resolve it?
I was able to resolve the issue. It's a bit embarrassing, and I swore I tried this fix before, but apparently now. It was quite a very simple fix.
I just set the styles of the body to overflow-x:hidden.
body {
overflow-x:hidden;
}
That simply removed the scroll bar and hid everything outside of the immediate browser window.
I seem to be missing a horizontal scroll bar on this page, http://www.animefushigi.com/
If you make your browser window skinner, half the page will be cut off but there will be no scroll bar.
I believe the main content width should be 1024 px before the need of a scrollbar
because the wrapper div does not have a stable min-width(and for browser which not support min-width, such as ie6, there is a child div .wrapper has a stable width in this case, so it will be ok,too ),which should be setted.
e.g.
//add css
#master_wrapper{min-width:1000px;}
It looks like overflow:hidden is used to clear floats in a couple of places. If you get rid of it on #master_wrapper then the horizontal scrollbar will return. However this will cause that element to collapse to a height of 0 and making this image disappear from your page. You can however rearrange your background images using the html for one of them to sort that issue out.
Homepage
About page: /about.html
CSS: /saucy.css
I'm sure I'm overlooking something obvious, but I can't seem to find it.
Both of these pages stem from the same HTML skeleton and use the same CSS file for formatting. Why does the About page centre differently to the homepage?
Thanks!
They center the same for me, but I suspect that for you it's because of the scroll bar. The home page is taller, so the scroll bar on the right pushes everything left. The about page has no scroll bar so it's actually in the middle of the screen.
Your Homepage has enough content that it gets a vertical scrollbar, but your About page does not. (The same thing was going on here: CSS pages not equal even with the same css-file.)
Here are some options to consider:
Add overflow:scroll; to each page's stylesheet, (on the body element, for
example). A scrollbar will always be
rendered even when it's not
necessary, and your layout will not
move around.
Don't center your
content; specify a left margin in ems
or pixels.
I have defined a tag with a CSS attribute "overflow" set to "scroll". This is giving me both the vertical and the horizontal scroll bars. I only want the vertical scroll bar. What should i do?
You could try using the
overflow-y: scroll;
This will give you a vertical scroll-bar...
Using
overflow-y: auto;
will only show the scrollbar if it is necessary.
Try using "overflow-y: scroll;" instead. It's CSS3, but as far as I know, it's supported by every modern browser (IE6+, FF, Opera, Chrome/Safari/WebKit/etc.).
A quick explanation of the various overflow/-x/-y values, for those not familiar with them:
visible – The default. Content which does not fit "overflows" the box, usually appearing over or under adjacent content.
hidden – Content which does not fit is "guillotined" — cut off at the edges of the box.
auto – Content which does not fit causes a scroll bar to appear. Does not necessarily cause both scroll bars to appear at once; if content fits horizontally but not vertically, only a vertical scroll bar will appear.
scroll – Similar to auto, but scroll bar(s) appear whether needed or not. AFAIK, mostly used to prevent centered content from "jumping" if a scroll bar needs to be added to dynamic (e.g. AJAX) content.
overflow:auto;
I realize this is a very old question but I stumbled across it today. If, like me, you only want the y-scrollbar and then only when it's needed, I found this works:
.myclass {
overflow-x: hidden;
overflow-y: auto;
}
Cheers, Mark
overflow-x:hidden;
overflow-y:scroll;
I have a site which needs to be fully self-contained in the browser window, ie, the user must not have to scroll up and down to view different parts of the site. Content that is too long to fit into the content pane is handled with overflow:auto, which is working fine.
the problem is, no matter what I try I still have the following problem:
two sets of scrollbars http://www.wikiforall.net/bad_scrollbars.png
So beneaht the content which successfully fills the browser window, there seems to be a gap. This gap causes the vertical scrollbar to show itself (and there appears to be a similar gap on the right side which isn't as easy to see). I've inspected the elements using Chrome's element inspector and the <html> tag covers only up to that gap. So I have no idea where the gap is coming from.
The main page divs are setup with position: absolute, with left, right, top, and bottom all set to zero. These divs also have display: inline set, and do not have margins or padding. The html and body tags are styled the same way.
I've been looking around for a day or two but nothing I've found has worked. Does anyone know how to remove these scrollbars?
You can always use:
overflow: hidden;
To hide the scrollbars.