I've put in a form on this page, on my computer it doesn't extend beyond the page bottom, yet a vertical scrollbar appears.
Here's the page:
http://kimkellermedia.com/test3/contact.html
I've inspected the page, and the weird thing is that it shows nothing there, saying the html stopped before the cut off point, so I'm not sure what to change to get rid of empty space.
Since it doesn't seem to be showing up for everyone, here's a big screenshot of what I'm seeing: http://kimkellermedia.com/test3/example.html
Your content has a span having visibility:hidden, make it display:none. So that the space for the span will not be used.
I have tried by reducing the height of comment textarea and the scroll bar is gone now.
Please set the height of the scroll bar to 175px. It was because of the contents.
Now the scroll bar will not appear.
Related
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
There is a div. In this div has a chat. This div has scroll bar. I want to take a screenshot of all this div content at once. I almost did it by changing the div height to 500% and overflow: visible, but I got a problem. In fact I got about a large part of the chat in the screenshot, but at some point the chat just disappeared with a long white space till the end of the image as shown below.
I took this screenshot using the Firefox's "Screenshot node" feature. And I tried all possible extensions you can imagine before it and none worked (they don't detect the div scroll, just the main page scroll). Anyways, I want a HTML/CSS solution if possible. I want to understand why it is not working.
As you can see, there a lot of white space, but there is a lot of more chat that was ignored by the print.
What could have happened?
You can use FastStone Capture if you want to get a screenshot of a scrolling window or anything with scroll bars. Use the Capture Scrolling Window <Ctrl + Alt + PrtSc> in manual mode.
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.
My navigation bar keeps getting cut off when the browser window gets too small. I have it as position: fixed so that the navigation bar stays in the screen even when the page is scroll down. Doing this though makes it cut off. I also don't want to change the UI to 100%. Because this makes my links go to the next line on the page, but they have borders and it doesn't look professional. I set up a JSfiddle. I think ultimately what I want is it to be fixed vertically, but when people scroll side to side it becomes absolute. I feel that this could be done with javascript, but I have little experience on it. I've seen a few topics on the same subject, but i haven't seen it fixed.
You can adopt responsive menu then. A demo is here. Resize your browser to see how the menu adopts itself based on the available width.
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)