I have been struggling for several hours about this problem, although it seems ridiculous I cant fix it somehow.
So this is the webpage draft, http://www.mysecretathens.gr/Sera/test.html
If you click on the Bio link, you will notice that the topbar menu on the Biography.html is moving slightly to the right.
How can we fix that? Any ideas?
p.s I have noticed that If I have the same picture in biography.html as in test.html there is no problem, the topbar remains in the saim position.
html{
overflow-y: scroll;
}
This forces a scrollbar on the right hand side
That's because your first page has a scroll bar and the bio page doesn't. You can force a scrollbar to always show up which can be annoying but consistent, or use absolute positioning to have the content always appear in a specific location, albeit probably not centered.
The content on the first page is going below your screen, meaning you will have to scroll. This isn't the same for the bio page, hence the inconsistencies, either add more content, set overflow-y to scroll or just ignore it (as users will)
Related
So when I scroll down from the landing page it sticks at the next section. I'm not sure whats happening. There's also a white bar at the bottom of my site that i can't get rid of. How do I fix a scrolling that seems to "stick" when it goes over a certain section and how do I fix white space at the bottom of my footer? Here's a link a github I created to show what I'm dealing with, too much code to copy and paste here to get a good answer
https://github.com/OakHarbor/mapletest
I checked the site, and the problem is you are using a BIG really BIG images in the background, images like "wood1.jpg" has a resolution of 6000x4000px this is a lot the other image "wood2.jpg" has almost 8200x5500px, just this image has 12mb this is like 4 times what a whole page should have of size, so when you're scrolling the page this images start to load so the "sticks" is the page suffering to load.
Your imagens should be something like 800x400 or even less and don't forget to optimize them there is tools in the web that remove all the unecessary meta information check here https://imagecompressor.com
And your "white bar" is that you set a id in your tag html "noScroll" and this css was apply to it, basicly this alow you to acess the content with scroll bars, if you don't need this feature just remove it that the white bar will disappear
#noScroll {
overflow: scroll;
}
For Stick Problem
Please keep the fixed background to scroll.
For Footer White bar
If you want to remove the white bar from the footer, please remove top: -50px from #footer id and use of margin-top: -50px instead of this and now It will be fixed.
I'm working on a project. There is an issue on the front end side. The site is responsive, but when I view it in mobile width (specially for iPhone 4 & 5), the vertical scroll doesn't work.
I'm not using any div that needs scrolling, the whole page is not scrolling vertically, I'm afraid I can't provide the code. The thing I wanna know is why does this happens? and what would I've possibly done wrong?
1) I have added -webkit-overflow-scrolling:touch on body tag but my chrome browser is not picking it up and saying invalid property.
2) I have added body{overflow-y:scroll,position:relative} Now its showing a scroll but there is no bar between the scroll, and its pretty much stuck there.
I think its because of position and z-index the z-index value make problem in your small screen.
Its possible that the element which have high z-index value. stopping you for scroll.
and It can be possible you have overflow:hidden in wrong place. It will be good, If you show some code of line or your site link.
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.
I'm currently making a new website for my school and some of my webpages have more content than others and they require scroll bars and when you open these pages, the content moves with a few mm to the left which is really annoying and I can't leave it like that.
Some people advice me to target the html tag and use the overflow-y:scroll property but that way the pages with a few lines of text get a unusable scroll bar - it just looks unprofessional... Is there another option to bypass that issue? I'll be grateful if you can answer me :)
overflow-y: auto;
Causes the scroll bar to be visible when it is needed. Otherwise it will stay hidden. Try and see if it works.
I have a pretty simple site, which has a footer that is stuck to the bottom of the page and a content area that can scroll if the content is too long, and the end of the content will clear the footer like below. If the content fits in the page then no scrollbar is shown.
However, recently some CSS/php change which i can't for the life of me detect, has meant that the page no has this huge area under the bottom of the main content div which the user can scroll down like so.
Normal page view with everything looking as it should.
Here is the view for every page now, a user can scroll way below the end of the main content div to reveal this massive empty area underneath.
Having had this working nicely a day ago, Im not sure where to look next. I have check all of the css to make sure there are no syntax errors, I have checked all of the wordpress template files to make sure there are no unclosed divs or vice versa.
Does anyone know a starting point to look at to try and fix this? is there a common error for this type of thing? If you need a link to the stylesheet or html just ask (didnt copy as it was too long)
Not sure why you are using fade element. Definitely it's causing the issue.
Add this CSS to fix your scrolling problem by hiding it.
#fade { display: none; }