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

The only thing I can think of would be a plugin that's conflicting with the same code and overriding the code you have.

Despite having it, paste the code into Custom Code > CSS Rules and see if that takes control of the situation.

Share this post


Link to post
Share on other sites

Posted · Report post

The code never sorted mine still have that gap

Share this post


Link to post
Share on other sites

Posted · Report post

@Simon_P: the padding-bottom: 8px is now live on heartbeing.com. The bottom bar still exists though. Now, however, instead of being pink (the body bg color) it is the dark grey of the footer background.

Share this post


Link to post
Share on other sites

Posted · Report post

Olly,

Can you provide a link to the site in question please.

Share this post


Link to post
Share on other sites

Posted · Report post

So why not remove that, and just make the body{} the same color as your footer?

Share this post


Link to post
Share on other sites

Posted · Report post

The point is that the theme isn't really working the way it should. Working around/compensating for 7px of dead space isn't hard. I was asking the question because I couldn't figure out why it was doing this and figured that it was something that the dev team should be made aware of since I couldn't find anything in my own code that was causing it which has been further re-iterated throughout this thread.

Share this post


Link to post
Share on other sites

Posted · Report post

This is in the reset.less file.

http://screencast.com/t/GEVDsoRVvD

For some reason, the margin:0 being applied to body is actually doing the reverse. To fix;

1. Create a /less directory in your child theme.

2. COPY (not move) reset.less from pagelines/less into your childs /less directory

3. Remove body from the reset. http://screencast.com/t/6sZLTdxs

4. In your style.less, add

body {margin-left:0;margin-right:0;}

Without spending a lot of time I really can't tell you why it's doing that. I haven't seen this pop up on any of the sites I've been doing so that's kinda strange. None the less, hope this helps.

Share this post


Link to post
Share on other sites

Posted · Report post

If you wish to color your background, just change the color of your body ?

 

If you're using Full Width Sections, look at the image for the setting

 

http://d.pr/i/gdQT

As you can see, it says body/footer. Therefore if you wish to add a color to your footer area, simply add a color to your body in color control. If I remove the image from your footer and #333, I can see the magenta you have set for  your body background color.

Share this post


Link to post
Share on other sites

Posted · Report post

Usually when this happens there's some code error of some kind, such as an extra empty paragraph tag or a missing ; in CSS. It can also be an empty div. Had you removed anything from the footer area like a sidebar?

Unfortunately, I cannot find anything looking at it and so I'm going to escalate this, but while I do, please copy your custom code and paste it into the Direct Input tab here and validate: http://jigsaw.w3.org/css-validator/

This will tell you if there's anything wrong with your custom code.

Share this post


Link to post
Share on other sites

Posted · Report post

I think it is something with the newest version of pagelines. I have a website with no custom code... just a straight install that was running an older version of pagelines and there was no gap. I updated to the latest version and now the gap is there.

http://aslimmehcg.com/newsite/

Share this post


Link to post
Share on other sites

Posted · Report post

Hrm.... I did as you asked, and it doesn't seem to have fixed the site. I added the reset.less into the less folder (see attached image) and edited it as you specified. I also re-saved my pagelines settings in the backend to force a re-build of the less documents... and it is still showing that 5-10px at the bottom (you can see the updated css styles in Firebug). I also looked at it in Safari and Chrome and both of those browsers are showing the same thing. Its like the <body> tag is inheriting it from somewhere that Firebug can't identify because its not showing up anywhere. I've also tried turning off all the plugins as per Rob's earlier suggestion and it was still there.

Also, I just downloaded a fresh copy of Wordpress, a fresh copy of Pagelines 2.3.6 and installed both as clean installs with no modifications at all. That gap is there still...

post-30217-0-01949400-1354052219_thumb.j

Share this post


Link to post
Share on other sites

Posted · Report post

I will discuss this with our developers.

Share this post


Link to post
Share on other sites

Posted · Report post

For anyone new who's experiencing the 5px gap at the bottom of the footer, this will be rectified on the 2.3.7 update, which will be available shortly.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Yeah, the only thing the validator returned was a couple of filter references for IE — filter:alpha(opacity=50); — which obviously wouldn't cause this. Thanks for looking into this.

Share this post


Link to post
Share on other sites