Random white-space after content (Webkit browser bug) - html

I have been getting an unknown white-space at the bottom of my Service pages. I'm using column-count: 2; to break the images up between two columns.
Update: This is a Webkit browser problem
The problem is the extra space at the bottom of mainCont, left side column.
If the images all line up flush then there is about a 30px of unneeded white-space. Although if the images do not line up flush then there is about a 50-70px of extra white-space. I have a 10px padding on the main containers but I can't find what is creating the extra spacing.
Here is a JSFIDDLE (remove/show in url to view code) to see what the problem is. Also here is the Live Site so you can see how it affects each one of the service pages.
CSS for main container:
.mainCont {
width: 100%;
background: #f7f7f7;
padding: 10px;
position: relative;
margin-top: 2.5%;
}
Edit
There is about 160px of extra space at the bottom minus 20px(mainCont and gridbox img equals 20px in padding).

I have been making research since ysterday.
If image sizes are equal, no problem on all browsers
If image sizes are different, extra space occurs at the bottom of
the page.
This is the bug of chrome browser. There is something wrong with balancing algorithm. They haven't resolved this issue yet. You can see here

Related

Large images with overflow: hidden; don't get centered in Firefox

I'm trying to get rid of the horizontal scroll bar (A) but when I changed my footer my images got messed up (B) and I'm not sure what is happening or what to do.
A: Unwanted horizontal scroll: https://mabonzo.github.io/prj-rev-bwfs-tea-cozy/teacozy/
B: Commented out footer and the images go wonky: https://mabonzo.github.io/prj-rev-bwfs-tea-cozy-test/teacozy/
Initially I was trying to change my footer rule-set from having left: 20px; to margin-left: 20px; or padding-left: 20px; when I ran into this problem! I speculate that it is related to the actual resolutions of the images, but I'm not sure.
Resizing the browser fixes centers the images.
I asked on a Slack group to no avail, I just tested it on different browsers and it seems like this is an issue only on Firefox. On Chrome and Edge they load no problem... So I guess my updated question is how to fix this for Firefox users.
EDIT: going to update the website, so the problem won't be in the (A) link. But the TEST site (B) will still be up and broken. Thanks!
Your footer element has an auto width (which is the full width of the screen, because it's a block level element) but then you say left: 20px (combined with position:relative) so now it's the full width of the screen but it starts 20px from the left, meaning it will always be 20px off the right side of the screen.
padding-left:20px on the footer will accomplish the same goal and not cause the horizontal scrollbar.
Your images seem to be defaulting to the left on Firefox because you have position: absolute on .mission-child img. Setting this to position: relative seems to correctly centralise the images for me.
Your footer occupies the full width on the page, in addition to having left: 20px on it. This offsets from the left, leading it to have a total width of 100% + 20px. To offset the text contained within, but not the footer itself, you're looking for padding-left: 20px.
Hope this helps! :)
Firefox might just render position: absolute; images within display: flex; position: relative; justify-content: center; align-items: center; divs weird!
I fixed the problem by adding the align-self: flex-start; and top: 0; declarations to the .mission-child img and .locations-child img rule-sets.
Thank you for the help!

Empty space on left and right even after fixing html width

Can anybody tell me why am i getting empty space on left and right of html body in this link click here. I am using mozilla firefox. I have even tried reducing width of html tag to 980px. I am getting horizontal scroll bar because of that extra space on left and right. Please help.
The first div under your header div (under <div id="header">) has this inline style
width: 100px;
margin: auto;
height: auto;
border: 0px solid rgb(51, 51, 51);
padding-right: 1160px;
padding-left: 95px;
Look at padding-right. Is that meant to be like that? Removing that gets rid of your horizontal scroll bar. It does nudge your header around a bit, but that may be your culprit. Or you could just do what Spring said, but that's not really clearing the issue as your jus hiding the overflowing elements and not stopping it from overflowing in the first place.
Its quite hard to do much more using Firebug on your site because there is so much going on (you have over 40 scripts loaded!) that the DOM keeps changing. You might wanna clean up some of those scripts and get rid of stuff you don't need, you're adding a lot of unnecessary bloat which will slow down your site, but that's a whole other subject.
you can add to body element this style
body
{
overflow-x: hidden;
}
I tried this style using fierbug and it worked for your page

Why is there extra space on the bottom of page?

I'm trying to make a sticky footer for a site I'm working on and I can't get rid of an extra white space at the bottom. I see it in Chrome and Safari (I haven't tested other browsers yet). When the page first loads, you don't see it, but if you scroll down there is about 2-3px of just white space. How to I make it so that my footer sticks to the bottom?
This is the site:
http://ec2-23-23-22-128.compute-1.amazonaws.com/
And this is what I'm trying to accomplish:
How do I get rid of the extra white space at the bottom of the page?
NOTE: I know there are a couple of other rendering issues, but the only one I'm worried about right now is the extra pixles on the bottom of the page. I've been playing with negative margins, 0 margins, paddings, etc all day and I'm not getting anywhere with it :/
It disappears when you give the image in the div with class "img-wrapper" display: block. This is common with images, I see you are doing this for a css reset:
* {
margin: 0px;
}
I would suggest against this. A proper css reset or normalize would go a long way to easing these kind of headaches.
Edit: I know you said it's a work in progress, but just as a heads up if you haven't noticed the window also scrolls when you don't need it to. This is the issue:
#b-container {
background-color: #F1EFE6;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -170px; // originally this was 0 auto -150px
}

CSS margin issue with floating dynamic elements withing a centered div

I'm coding a Wordpress theme and I'm having an issue displaying 5 dynamic post thumbnails next to each other (left floated) with a 20px right margin within a centered div.
here's a link to a page: http://www.lesfourchettes.net/info (the issue occurs when you click on "Les Prèfs" in the top navigation: the top menu and the below content moves 10px to the left.)
Here's the issue:
the site has a 960px width and is centered. (#wrapper)
the 5 dynamically generated post thumbnails are 176px wide with a 20px right margin each. (#.prefs-thumbs)
i choose these dimensions for the thumbnails thinking i would have 5 thumbnails and 4 margins between them which would add up to 960px.
but the reality is that the last thumbnail of each row also has a 20px margin and therefore the whole thing adds up to 980px (20px wider than the site).
the only solution i found for showing 5 thumbnails per row was assigning a 980px width to the thumbnail div (#prefs).
however this seems to provoke an issue with the centering of the rest of the content which is no longer centered with the 960px site width but width the 980px thumbnail div.
so whenever i click "lesprefs" to display the thumbnails (using a little jquery function), the whole content moves to 10px on the left.
The whole thing is a bit complicated to explain. But i feel like there is surely an easy CSS solution to my problem. Perhaps something to do with the overflow property, display property or someting like that... I'm just not good enough with CSS yet to identify the solution and my issue being so specific, I haven't found the answer on the web.
i feel like the problem lies within those lines of CSS:
#wrapper {
width: 960px;
height: auto;
margin: 0 auto 0 auto;
}
#prefs {
width: 980px;
height: 390px;
margin: 69px 0 0 0;
}
.prefs-thumbs {
position: relative;
float: left;
margin: 0 20px 20px 0;
}
Any help would be greatly appreciated.
Cheers!
You're noticing the 10px shift because the page height is increasing, and a horizontal scroll bar is being added by the browser.
My preferred solution to this problem is to always show the horizontal scroll bar, with the following CSS (works in all modern browsers):
html { overflow-y: scroll; }
I see the centered alignment shifting toward the left because of the vertical scroll that appear on the right side of the page.
First thing to solve is the actual fitting of the elements in your block.
You need to remove the right-margin from the last element in each line..
So either set a class to the last item which overrides the margin with marign-right:0 or (for modern browsers) do it purely in CSS with
.prefs-thumbs:nth-child(5n+1){
margin-right:0;
}
reference: http://www.w3.org/TR/selectors/#nth-child-pseudo
You also need to remove the border from the images as that gets added and instead of 176 pixels each of your images occupies 180 pixels (it has 2 pixel border around it)
So, correct your math first..
The issue with the moving of the content, is that the scroll bars appear once the content exceeds the page height (as expected). One solution is to keep the vertical scrollbar alwats visible, as #wsanville suggests in his answer.

CSS class display

I am having a CSS class with the following code. I am trying to put a DIV at a distance of 140px from the top of webpage and to put it in the middle (equal distance from left and right). It is displaying correctly in Firefox and Google Chrome but not displaying correctly in Internet Explorer 8. Can anyone tell me what is the problem with this code? Also can anyone give me some link with browser compatibility guide?
div.main
{
padding: 0px;
width: 980px;
/*height:1350px;*/
/*border: 1px solid red;*/
margin: 0 auto; /*helps in getting the DIV to be in middle i.e. equal distance from left and right*/
overflow: hidden;
margin-top:140px;
}
I find QuirksMode most helpful for browser compatibility info, plus it has some other great info.
The problem, however, depends on more than just the CSS. In order to answer your question, we'll need to see some HTML and the rest of the CSS you've got. And a description of what's incorrect with IE's rendering. Without seeing that, my first suggestion is to make sure you're using a strict DOCTYPE.
Note that centering the DIV will only center it in the containing block (probably BODY), which, wichout an explicit width, will only be as wide as the content and not the full width of the window.
margin-top:140px; is "the problem". To reach your aim use:
padding-top instead of margin-top;
if you cann't - make a wrapper div and apply padding-top to it;
or apply position: relative/absolute; top: 140px; to the div. It is suitable
sometimes.