I have a website that is perfectely centered aligned. The CSS code works fine. The problem doesn't really have to do with CSS. I have headers for each page that perfectely match eachother.
However, when the content gets larger, Opera and FireFox show a scrollbar at the left so you can scroll to the content not on the screen. This makes my site jump a few pixels to the left. Thus the headers are not perfectely aligned anymore.
IE always has a scrollbar, so the site never jumps around in IE.
Does anyone know a JavaScript/CSS/HTML solution for this problem?
I use
html { overflow-y: scroll; }
To standardize the scrollbar behavior in IE and FF
FWIW: I use
html { height: 101%; }
to force scrollbars to always appear in Firefox.
Are you aligning with percentage widths or fixed widths? I'm also guessing you're applying a background to the body - I've had this problem myself.
It'll be much easier to help you if you upload the page so we can see the source code however.
#middle
{
position: relative;
margin: 0px auto 0px auto;
width: 1000px;
max-width: 1000px;
}
is my centered DIV
Well you don't need the position: relative; - it should work fine without it.
I take it that div has to be 1000px wide? It would still be a lot easier to answer this with the actual website.
Related
I am using flexSlider in a full width mode
for a site that I'm building.see here:
http://clients.tipoos.com/glam/
notice that the site hasthis full width section for the slider but all other content
is centered using a consistent class called: .main
What I'm trying to accomplish seems pretty easy but I can't make it work:
I would like to keep the slider full width but center the arrows like so:
I tried writing small Jquery to wrap the arrows with div but it didn't work.
neither wrap nor wrapAll was working..
will appreciate any help
Thanks
Found a solution. hope it will help anyone here.
in order to center the arrows but still having a full width slider
I used the follwing CSS:
.flexslider .flex-direction-nav {
margin: 0 auto !important;
max-width: 980px;
position: relative;
}
Explanation:
margin: 0 auto !important;
this centers the arrows container
max-width: 980px;
giving a fixed width to depending on your website width
position: relative;
this makes the magic. it allows the arrows to be positioned inside the main div
I also added negative top position to my arrows but that's only in my case
hope that helps anyone.
How do I make my side bar fixed so when scrolling down on the page the sidebar will follow like my main menu ? I tried using a z-index to fixed the position but it doesn't work. Does any one know how to fixed that ?
This is my site
And its ther anyone to make the sidebar fixed on ONLY blogg page and "senaste nummret" page? dont want them to be fixed on all the other pages.
.sidebar-left {left: 0px; top: 20px; padding: 0px; position:fixed;}
You need to define where you want the sidebar to be fixed in relation to. Hence the left: 0px and top: 20px. If you want it fixed relative to the header, footer or rhs, just change the 'left' for the correct position.
Hope that helps.
I have been changing lots of things to my website and now I somehow have created it to not fit to screen and has a tiny scroll to the right. Can someone see the issue that is causing this.
Looking to get rid of the black on the right hand side. Only the top and bottom should be black.
www.jobspark.ca is the website
UPDATE
So this is the line of code that is causing the black space. But when I remove the 100% the image shrinks back to fit into the 960px site width. Any ideas? im ready to give up haha Squarespace is not easy to modify
#collection-513d5347e4b0abff73be5267 #site > .wrapper {
max-width: 100%;
padding: 0 0px;
margin: 0 auto;
}
My guess is you you have width:100% on your div elements, this forces the client area of each element to fill the browser. Now since the elements' borders add an additional pixel on each side, you end up with a scrollbar.
I would recommend that you omit width:100% from your div elements. It should auto expand to 100% of it's parent and that should solve your problems.
If all fails this should work,
overflow-y: auto; // or replace auto with scroll
overflow-x: hidden;
My site is http://www.dermatek.com/
All of a sudden there is a horizontal scroll bar on firefox, I don't see it on IE or Chrome though.
Can someone tell me how I can fix this? I was editing some sizes but not sure how it could have happened.
Thank you
Here is a link to a screenshot of what i looks like on my Firefox: http://i.stack.imgur.com/1X5Sy.jpg
I suppose it has something to do with your javascript:
Firebug shows:
<ul id="nav" style="width: 1037px;">
When I disable JS all seems fine.
Inspected the element on your site.
Seems that you footer has some fixed width element.
.footer-linklists {
width: 300px;
float: left;
}
<div style="float: left; width: 473px;">
It is not good practice to use inline css. And fixed width might cause the overflow.
You can try to use percentage instead of the fixed width. Also take the padding width into consideration.
Also try to use overflow: hidden might solve the issue. But it might cause some part of content being hidden.
Hope this can give you some threads to solve the problem.
I am getting a horizontal scroll bar in IE6. Attached the path to zip folder. Download and open index.html page in IE6. Let me know how to remove the scroll bar.IE6-horizontal-scroll bar
Its one or more bad values in paddings. Try replacing all "padding" with "xxx" for a moment and you'll see that the problem disappears.
You also need to study the broken box model on IE.
Solution:
Replace all padding: 10px with padding: 10px 0;
Fix what does not look right (padding wise)
You need to set the horizontal padding of div#container to zero too. You're only setting the top padding in skin-ie.css to zero now. Change padding-top: 0px in skin-ie.css to padding: 0 (the px is unnecessary for zero).
tried
html{
width:100%;
overflow-x: hidden;
}
body{
width:100%;
overflow-x: hidden;
}
yet?
EDIT:
This works but hides right side edge content. See the link screenshot. http://shivanand.in/temp/rightside-edges-hidden.gif – Shivanand
Hmm, that is weird. Are you using any position: absolute DIVs with width set in pixels (not %) that are causing this to happen?