I've been trying to troubleshoot a ~20px gap that is appearing at the bottom of my site.

You can view it live here http://www.nachosyllabus.com
Screenshot highlighting the gap http://awesomescreenshot.com/0e6fpp94f

At first I thought it was my CSS, but now I'm almost certain it has to do with panels' use of clearfix::after

CSS Wizards, what are you thoughts?

Comments

nevets’s picture

nevets commented

Can't find the exact cause but you have a number of empty panels/panes there at the end.

bryancasler’s picture

bryancasler commented

Ya, those are going to be filled in due time. But even on pages where they have already been filled in, the problem still persist.

nevets’s picture

nevets commented

A link to a page where they are filled in would help, try to determine what is happening with all those empty divs make the problem more of a challenge.

merlinofchaos’s picture

merlinofchaos commented

That's core's use of clearfix:after

Maybe add this:

.site-wrapper.clearfix:after {
  content: none;
}
bryancasler’s picture

bryancasler commented

Thanks for helping everyone, those empty divs have placeholders now. And I added Merlin's bit of CSS.

If I switch clearfix::after from hidden to visible you can still see additions being made even after Merlin's fix.

I was still having trouble figuring out which clearfix's where still causing the problem because the periods were overlapping. So I decided to throw this bit of CSS in to create a bit of visual distinction.

.site-wrapper.clearfix::after {content: "Z";}
.panels-flexible-590_370.clearfix{content: "O";}
.panels-flexible-row-590_370-1.clearfix::after{content: "--1";}
.panels-flexible-row-590_370-2.clearfix::after{content: "-----2";}
.panels-flexible-row-590_370-3.clearfix::after{content: "--------3";}
.panels-flexible-row-590_370-4.clearfix::after{content: "-----------4";}
.panels-flexible-row-590_370-5.clearfix::after{content: "--------------5";}
.panels-flexible-row-590_370-1-inside.clearfix::after{content: "--A";}
.panels-flexible-row-590_370-2-inside.clearfix::after{content: "-----B";}
.panels-flexible-row-590_370-3-inside.clearfix::after{content: "-------C";}
.panels-flexible-row-590_370-4-inside.clearfix::after{content: "---------D";}
.panels-flexible-row-590_370-5-inside.clearfix::after{content: "-----------E";}

Then I viewed the page and un-hid the clearfixe's. Turn's out the culprits were....

.site-wrapper.clearfix::after,
.panels-flexible-590_370.clearfix::after,
.panels-flexible-row-590_370-4.clearfix::after,
.panels-flexible-row-590_370-4-inside.clearfix::after,
.panels-flexible-row-590_370-5.clearfix::after,
.panels-flexible-row-590_370-5-inside.clearfix::after{content: " ";}

This resolved the problem, but it also made me wonder, is there a reason we can't just use clearfix::after{content: " "} for the whole site? Or is there a reason there needs to be a period in there? It's also odd that something that has visibility:hidden would still be taking up vertical space.

bryancasler’s picture

bryancasler commented

Looks like this issue has been discussed.
#457778: White space at bottom of page: .clear-block versus .clearfix

You just need to add font-size: 0; to clearfix::after

merlinofchaos’s picture

merlinofchaos commented
Status: Active » Fixed

Hey, thanks for finding that!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.