the site www.sterlingfoundations.com has an intermittent overflow problem with Google Chrome. It sometimes takes three times of reloading to see the problem but it pushes all of the content below Navigation (currently id="wrapper") into a narrow column with scrollbar on the left margin (it happens on all the pages of the site). The default.css gives "wrapper" an overflow: auto. When removing the "default.css" file, the fonts go to default but the layout issue is solved. So it has to do with the CSS overflow in "wrapper" I think.
One thing I noticed is the navigation bar looks like it squishes the longer phrases like "Private Foundations" and "Financial Professionals" and forces them to wrap to two lines when the problem occurs. Not sure if that's related. Any ideas? Thank you!
It doesn't look like you need overflow-y:auto on div#wrapper.
Related
I have a website that is meant to contain a full page image and a navbar at the top. At the very beginning of my project when I encountered the current issue where a white space appears to the right of my image, I simply set overflow-x: hidden. However, now I do not have that option and must deal get rid of it properly. I have created a CodePen that recreates the problem. I have no clue what is causing the issue, any help would be really appreciated.
This post is sorta similar to this one, but I'm keeping it because I think others with the same problem as I had might be able to find it easier.
Your issue isn't that the navbar is longer than the rest of the page, it's that your row content is getting messed up by Bootstrap's default row formatting. By default Bootstrap is giving it a margin right and left of -15px, override it with a in-line style="margin: auto" and everything fits together nicely.
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
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)
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
I have a slight issue with a site I am developing. I have body content colliding with a footer div, getting partially hidden behind it, and pushing out the footer content.
I've managed to duplicate these symptoms on only Chrome/Win, Safari/Win, and Safari/Mac.
You can view the page here: http://www.pacarmy.ca/blog2.php
I have validated the HTML, and the same page tests fine in IE9/win, FF/win, and opera/win.
Googling hasn't helped me, and the closest thread on Stackoverflow I've found wwas:
css chrome issue at footer cross browsers (IE,FF,Chrome)
Which isn't really the issue at all.
Can anyone advise? Speculate? Anything? :)
Thanks.
Your post is floated and parent elements never expand to contain floated elements so you need to "clear your floats". One way to do this is to add 'overflow:auto' to your section element. That causes the parent to expand on overflowing elements. However, I did not check to see if that's the best place or method to use for when you add more posts or elements on that page.
You can Google or search on SO for "clear floats" for more info and methods.