I'm experiencing a strange cutoff of my background image at the very bottom of my page. It's only evident if you have a short browser window and scroll to the very bottom. And it only happens on longer pages.
Firebug inspection reveals a viewport-width element, stretching entirely across the browser window at the very bottom, about 50px high that seems to be "blocking" it, but this doesn't correspond to any div in my layout - that I can find, anyway!
Also, when rolling over this strange element, it's the first <HTML lang="en-us"> line that gets highlighted in Firebug.
Longer page: http://bit.ly/151TFnW
============FOLLOWUP==================
Following the helpful suggestions here, I fixed the above by removing the 100% height from the BODY style. But that breaks something else! Now, on this shorter page:
Short page: http://bit.ly/1fvbnHY
The background image is still cut off at the bottom, when the browser window is tall enough to show this.
Remove the 100% on BODY and that second, shorter page is fine - full bg image and bottom margin - BUT the earlier link's problems return.
Help....!!!
From what I can tell, it looks to be caused by the height value assigned to body. When I remove that rule, most of the gap goes away. I assume the last bit is from some of the margin from the footer spilling over.
Well, it may or may not be considered a proper fix, as it doesn't address the reason why the pages in question reacted differently to the "body at 100% height" setting than the rest of the site... but I solved it by targeting it with CSS so that the problem pages simply don't receive that CSS rule.
So, sigh of relief, but tinged with the knowledge that I didn't really figure out why it was doing what it was doing.
Related
I've made rock paper scrissor game using html,css and js.When window is resized to small, some left portion of the page disappears .Using horizontal scrollbar i can scroll to right but not left.
I've checked for absolute positionings and negative margin but none worked.
What should i try ?
I expect to get entire page without any portion getting clipped off.
Hard to answer this without the code, but I would use devtools first to see what margins are being applied. You can look at the box model for each element in your dom and see what is being applied. Also, how small are you resizing? Do you have any explicit widths? If you are sizing down to 200px, but you have a div that is 250px, it clearly is going to have overflow. Devtools can also help with analyzing different devices too. Use the tool to set a size and see how your page responds, you can change the width of elements in the devtools to see if it removes the overflow.
I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
Since adding position:fixed elements, my pages have been scrolling too far and the fixed background repeats its self.
It's not an issue in Firefox, but Chrome shows this issue.
The problem can be seen at:
http://www.25892.rwswebsite.com/listings
It's been driving me crazy for hours. A second set of eyes would be much appreciated!
I dug around in Web Inspector and was able to fix a few of your problems:
Scrolling too far:
For <body>, overflow should be visible. This is the default value, so it will take this value if don't explicitly set overflow-x and overflow-y (and nothing else overrides it).
Multiple background images:
Looks like you're setting the background image on both the <html> and <body> elements. For fixed backgrounds like you're doing here, I like to set backgrounds only on <html> (see here).
Also, I you should try using background-size: cover for the background image. With cover, the image will be sized to the smallest dimension that will allow it to cover both the browser width and height. Browser compatibility is pretty good.
I have been working on a small project for myself to try and experiment with HTML5 and CSS3, to get the hang of it. I need help solving a weird - in my eyes - and unexpected CSS quirk.
I have put my work on CodePen.io to see: http://codepen.io/jbehrens94/pen/uKgvH
The thing is, I want all <section>'s to be 100% in height, so every section fills the exact 100% width and height of the browser's screen. The thing is, if you scroll down to the bottom, there is a lot of white and I can't find out why.
I have noticed margins not working well, so I worked around them, mostly by using paddings.
I tried changing display's, floats and so on, but I just can not seem to find what the problem is and why there is a lot of white on the bottom.
It should not be there, as there are no elements after the last section.
You have three <div />s with classes file, sites, and contact on your last page which start about halfway down but have a CSS declaration forcing them to be 100% height.
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.