Jump to content


Photo
- - - - -

5Px Gap At Bottom Of Footer

footer css gap margin padding

Best Answer beardedavenger , 29 November 2012 - 03:04 PM

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.

Go to the full post


  • Please log in to reply
40 replies to this topic

#1 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 23 November 2012 - 08:04 PM

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.

Posted Image

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:
Posted Image

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 23 November 2012 - 08:06 PM

Can you please post a link to your site?

#3 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 23 November 2012 - 08:17 PM

Please Login or Register to see this Hidden Content



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

#4 thejinxters

thejinxters

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 24 November 2012 - 03:24 AM

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:

Please Login or Register to see this Hidden Content



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 November 2012 - 06:18 PM

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:

Please Login or Register to see this Hidden Content



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

#6 thejinxters

thejinxters

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 25 November 2012 - 06:29 PM

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.

Please Login or Register to see this Hidden Content



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 November 2012 - 07:36 PM

I will discuss this with our developers.

#8 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 25 November 2012 - 10:54 PM

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.

#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 November 2012 - 11:46 PM

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

#10 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 26 November 2012 - 05:47 PM

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

Please Login or Register to see this Hidden Content



#11 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 26 November 2012 - 07:25 PM

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?

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 November 2012 - 07:35 PM

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.

#13 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 26 November 2012 - 07:52 PM

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.

#14 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 November 2012 - 07:58 PM

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.

#15 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 27 November 2012 - 03:17 AM

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.

#16 olly54

olly54

    Newbie

  • Members
  • 4 posts
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 27 November 2012 - 03:38 AM

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

#17 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 27 November 2012 - 03:53 AM

Did you paste Simon's code as is?

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

Please Login or Register to see this Hidden Content



#18 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 27 November 2012 - 04:50 AM

You can view that exact line of code at

Please Login or Register to see this Hidden Content

on line 174 of my style.css (viewable in Firebug). Still got a gap at the bottom unfortunately.

#19 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 27 November 2012 - 05:19 AM

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.

#20 olly54

olly54

    Newbie

  • Members
  • 4 posts
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 27 November 2012 - 12:30 PM

The code never sorted mine still have that gap





Also tagged with one or more of these keywords: footer, css, gap, margin, padding