Archived

This topic is now archived and is closed to further replies.

  • 0

5Px Gap At Bottom Of Footer


Question

Posted · Report post

So I'm a fairly experienced developer with php and css, and I'm finding a small problem with the pagelines framework that I can't seem to fix. There appears to be a 5px gap at the bottom of my pagelines sites that I'm unable to find the cause of.

HTML, BODY, div#site, and footer#footer, the only elements I could think of that would cause this, all have their margin/padding set to 0. When I turn the body background off/on, it is showing that it is the BODY element showing through. When I click on it using firebug, firebug highlights the html element. In the image below, the green line is where the browser should be sitting, but for some reason it has that 5px gap below the site.

site_screenshot.png

And this is a more visible example from another site I'm working on. The light beige/green at the bottom shouldn't be there and I'm not sure how to get rid of it:

site_screenshot_2.jpg

Share this post


Link to post
Share on other sites

40 answers to this question

Posted · Report post

Oookey dokey. This one was a bugger, but I found the issue. It lies within the .fix:: after in the #footer .outline. So to fix this, remove whatever padding you have on the #footer. Then do this

 

#footer .outline.fix::after{content:"";}

 

Currently, that content has content:".", and that period is throwing everything off.

 

I tested this in the head of your site and indeed corrects it. Let us know how you go about.

Share this post


Link to post
Share on other sites

Posted · Report post

As soon as I hear back from our developers, I'll let you know.

Share this post


Link to post
Share on other sites

Posted · Report post

@beardedavenger: thank you so much! That was definitely what the problem was. For some reason the site wasn't reading the style properly with the .outline.fix, so the line that solved it for me was:

#footer .fix:after{content:"";}

I know you were trying to specify it for only that one div (I turned it off/on with firebug), but for some reason .outline.fix wasn't being recognized... Firebug was showing the normal .fix being applied and then a second :after being applied (content:"" wasn't overwriting the previous one in other words).

 

Either way, problem solved, thank you so much!

Share this post


Link to post
Share on other sites

Posted · Report post

Awesome! Glad that worked out for you.

Share this post


Link to post
Share on other sites

Posted · Report post

Agreed! class outline doesnt work, but just .fix works.

 

#footer .fix:after{content:"";}

This seemed to fix the gap. Thanks bearededavenger and dokether. Dev team, maybe this is something you can fix in the next release of pagelines so we don't have to add this custom code every time we install and want the footer to be a different color than our background. Thanks again guys!

Share this post


Link to post
Share on other sites

Posted · Report post

Weird, works for me on the site I'm currently working on. Did you add margin-left:0 and margin-right:0 to your body in less?

Share this post


Link to post
Share on other sites

Posted · Report post

@beardedavenger: Yes, that is what my last post was saying and what the image showed.

 

@James: That unfortunately didn't solve the problem. As per the recommendations in that post I took off the body background and set a normal background color through the Pagelines backend and the footer is still showing as my default bg. You can see the overwhelming pink as the body background for now in case anyone wants to take a look: heartbeing.com

Share this post


Link to post
Share on other sites

Posted · Report post

Add to your customcss

#footer {
    padding-bottom: 8px;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Well im no css expert, but 2 mins with firebug lef me to :

#footer { padding-bottom: 10px }[/CODE]

Share this post


Link to post
Share on other sites

Posted · Report post

Can you please post a link to your site?

Share this post


Link to post
Share on other sites

Posted · Report post

Do you know what line or file that is from? It isn't showing up in my firebug and I just did a search in my style.css and it says that that line can't be found?

Share this post


Link to post
Share on other sites

Posted · Report post

http://heartbeing.com/

The other one is still on my local dev server so I can't show you that one.

Share this post


Link to post
Share on other sites

Posted · Report post

You don't need to find it in your CSS file to adjust it. You can simply add it to Site Options > Custom Code > Custom CSS and it should overwrite the existing line.

Share this post


Link to post
Share on other sites

Posted · Report post

Yes, but my point is that I would like to find out where it is happening so I can correct it at the source instead of needing to include a line resetting this padding in every website I develop.

Share this post


Link to post
Share on other sites

Posted · Report post

It isn't advised to correct the file if it's a core file (not a child theme) because that change will be overwritten when you update the theme.

Share this post


Link to post
Share on other sites

Posted · Report post

I too am having this problem on my sites. Adjusting margins and padding does not appear to fix it. I've tried adjusting on html, body, site, and footer with no avail. Also, It seems to appear with all web layout handler options and site design mode options.

here is one of the sites I am developing right now with that issue:

http://radicalcoaching.com/

Share this post


Link to post
Share on other sites

Posted · Report post

Footer padding-bottom 0px does not work on any of my sites either. Like I said before, padding and margin appear to have no effect on this issue, It appears to be something to do with the latest release of pagelines. Maybe it is code error in the programming as was suggested by ROB? It's not something in the custom code.

Share this post


Link to post
Share on other sites

Posted · Report post

I didn't say 0 i said 8

Share this post


Link to post
Share on other sites

Posted · Report post

8 doesnt work either.

Share this post


Link to post
Share on other sites

Posted · Report post

Simon seems to have found it, mysteriously in Firebug. It could be in any one of a myriad of places, from a plugin to WP to something totally unexpected. I apologize for the confusion. I'm curious too, as to where it originated.

Share this post


Link to post
Share on other sites

Posted · Report post

I have the same problem tried the code simon found but it does not work for me?

Share this post


Link to post
Share on other sites

Posted · Report post

Did you paste Simon's code as is?

Because what he found and posted is what causes the problem. The proper solution is:


#footer { padding-bottom: 0; }

Share this post


Link to post
Share on other sites

Posted · Report post

Can you add the code to your custom css so i can see it live?

Share this post


Link to post
Share on other sites

Posted · Report post

You can view that exact line of code at heartbeing.com on line 174 of my style.css (viewable in Firebug). Still got a gap at the bottom unfortunately.

Share this post


Link to post
Share on other sites