Jump to content


Photo
- - - - -

White space beneath footer

footer white space

Best Answer Rob , 17 March 2013 - 05:14 PM

Hi,

 

For ?page_id=124, I'm seeing the exact same scenario as before; all well.

 

Let me explain the issue of the content within the footer. The footer is a templated section, meaning that within the HTML of the site, the footer always appears as the lowest part of the site. Via HTML, things can be placed below it, but in viewing the HTML, the only things I see below the footer are javascripts - some from PageLines, some from Content Forms 7. These should not cause the footer to adjust upwards, move, be repositioned or enable space below the footer.  I have some of the same javascripts on my sites in the same places.

 

The content fits within the footer, and doesn't extend beyond it, going up or down. If you padded or margined the content within the footer, the effect would be to stretch the footer but not to move it. In other words, the grey background area would increase in height, but there's no possibility of having whitespace below the footer as a result of the content.  If you were to paste a long volume of text, for example, into a text widget in the footer, it would simply stretch the footer the length of the text, plus any padding and margins, but keeps it within the grey backgrounded footer. No matter the length of the content, it's impossible for it to bleed below the footer, without modification of HTML code in core files.

 

The plugin you had, and I know you were kind to remove it, for the cookie bar did place a div below the footer, but in removing the plugin, the div is gone. 

 

I'm going to ask one of my colleagues to look into this.  Apologies for the delay that may entail, but since I can't replicate it, I'm not sure what else to do in order to assist you.

Go to the full post


  • Please log in to reply
20 replies to this topic

#1 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 14 March 2013 - 10:20 PM

Hi,

 

Please help me understand how I can remove the white space from beneath my footer when my pages have minimal content, ideally the footer should always be at the bottom of the page.

 

Link to the website page with the issue.

 

Please Login or Register to see this Hidden Content

 

Thank you in advance



#2 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 15 March 2013 - 02:03 AM

Hi there,

 

Do you mean the area above the footer? Not below. Like -

Please Login or Register to see this Hidden Content

 

If so you can do this by using css to edit the minimum height of the page. Pagelines has a set min-height of 400px for the page area, if you edit this to less then you'll be able to reduce that white area and keep the footer on the page/page won't scroll etc.



#3 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 15 March 2013 - 04:55 AM

Hi James,

 

Thank you for you reply, but no I mean the area beneatht the footer.

 

Please see the attached screenshot.

 

Kind regards,

Attached Files



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 13067 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 March 2013 - 06:27 AM

Hi,

 

Go to Color Control and change the following:

 

Body

 

From White to #E6E6E6

 

Page

 

If no color has been set change to White



#5 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 15 March 2013 - 06:59 AM

Thank you, but that is not what I am trying to achieve - rather than filling that space with a color, I would like for the footer to be positioned at the botttom of the page.



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 13067 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 March 2013 - 07:36 AM

See the post here, it maybe what you're looking for.

 

Please Login or Register to see this Hidden Content



#7 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 15 March 2013 - 07:52 AM

I did see that post, but unfortuantly I have limited to no skill coding in Javascript, hence why I am using a Template/Framwork ro build my site.

 

I copied the script in as is, but to no avail.

 

Will I need to modify it in some way to get it to work?

 

Thanks for you help



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 13067 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 March 2013 - 08:30 AM

Javascript isn't my forte to be honest. However, you can try this, add the below code to your custom CSS. It looks OK on my screen and will only effect the page you linked above.

 

 

Please Login or Register to see this Hidden Content



#9 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 16 March 2013 - 06:30 AM

Thanks for you reply, but unfortuantly that didn't work.

 

Adding that code made no change to my site layout.

 

Also I am not sure that setting a fixed min-hieght is what I am aftet, as per the post you referenced in you previous post, I need the footer to be at the bottom of the page regardless of the screen resolution of the user.

 

Thank you for you help.



#10 Rob

Rob

    One Smart Egg

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

Posted 16 March 2013 - 02:22 PM

Hi,

 

I suspect this may be plugin related, and browser specific. Presently, I don't see any issues with the footer, once the cookies advisory plugin is accepted in Firefox, IE9 or Chrome. Either it has been fixed or the solutions applied were held back by a cache plugin from view.  It appears to be fine now. See the attached snapshot.

 

 

Attached Files



#11 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 16 March 2013 - 05:14 PM

Hi Rob,

 

Thank you for your reply, please advise which page id that screen print is from - I only see the issue where there is limited page content.

 

I am also testing in IE9 and Firefox and still see the footer half way up the page on both browsers

 

Thank you for you help.

 



#12 Rob

Rob

    One Smart Egg

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

Posted 16 March 2013 - 06:03 PM

Hi,

 

I used the link provided at the first entry of this topic. See the image below.

 

It looks the same way in IE and Chrome, so if you're having an issue still, this could be browser cache, or, a plugin issue with your OS.  I'm consistently seeing the site as shown in the image below.

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  79.17KB   7 downloads



#13 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 16 March 2013 - 06:12 PM

Could it be that you have a different screen resolution to me, so I see space at the bottom of the page and you dont.

 

I am currently viewing the site on my laptop with a 1600 x 900 res, when I change the res to 800 x 600 - the issue goes away because everything is larger.

 

My goal is, regardless of the screen size/res, to make sure that the footer is always at the bottom of the page.

 

I am not sure if you have read the related post, but this chap seems to have a similar problem.

 

Please Login or Register to see this Hidden Content

 



#14 Rob

Rob

    One Smart Egg

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

Posted 16 March 2013 - 06:34 PM

That chap's issue is quite different from yours, though it may appear similar.  I've viewed his site and could see his space at the bottom where in yours, I cannot.

 

Again, if you're having this issue, and I'm not, then clearly this is a browser-specific issue and those are invariably caused by plugins. Screen resolution shouldn't force the footer to move up as you're seeing, unless you have some kind of element within that footer that's an absolute fixed width and has some unique CSS applied to it. A text widget shouldn't cause that condition. 

 

The HTML for the footer is perfectly fine. However, I notice that you have quite a bit of javascript in the page - all loaded below the footer, including one for 'catapult cookie bar' which places a div below the footer.  When the cookie has been accepted, the div remains, but is invisible in most machines. I'd recommend disabling the plugin temporarily to see if this resolves the matter (remember to clear all caches when you do this). 

 

If you use

Please Login or Register to see this Hidden Content

to inspect it, you'll see there's nothing pushing the footer upwards.  Thus I conclude that there's something about your browser or OS that's picking up the space occupied by either that cookie alert plugin's div or the footer-based javascripts.

 

I have also resized and rescaled my browser resolution to see if I could replicate this issue and all I lost was the Indigo background image on the lower right. Nothing else was affected and the footer did not rise above the browser bottom.



#15 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 17 March 2013 - 01:46 PM

"Again, if you're having this issue, and I'm not, then clearly this is a browser-specific issue and those are invariably caused by plugins."

 

I have tested using the latest version of IE and Firefox, presumbly you have tested using the same, so I question whether this is a browser compatibility issue - With regards to plugins I have deactivated them all but still see the same behaviour.

 

"Screen resolution shouldn't force the footer to move up as you're seeing, unless you have some kind of element within that footer that's an absolute fixed width and has some unique CSS applied to it. A text widget shouldn't cause that condition."

 

I dont believe the issue is the the footer is beign forced up, but more that it is sitting at the bottom of the content rather than the bottom of the page (I am not sure if this is the expected behaviour, please could you clarify if the footer should always appear at the bottom of the screen regardless of screen resolution and the amount of page content?)

 

"The HTML for the footer is perfectly fine. However, I notice that you have quite a bit of javascript in the page - all loaded below the footer, including one for 'catapult cookie bar' which places a div below the footer. When the cookie has been accepted, the div remains, but is invisible in most machines. I'd recommend disabling the plugin temporarily to see if this resolves the matter (remember to clear all caches when you do this)."

 

As per my previous note, all plugins have been disabled

 

"If you use

Please Login or Register to see this Hidden Content

to inspect it, you'll see there's nothing pushing the footer upwards. Thus I conclude that there's something about your browser or OS that's picking up the space occupied by either that cookie alert plugin's div or the footer-based javascripts."

 

I have used Firefox to inspect this area and all I see is a body.page element, again I am not sure if this is expected?

 

<!DOCTYPE html>
<html lang="en-US">
<head>
<body class="page page-id-124 page-template page-template-page-beta-php custom static pagelines beta full_width navbar_fixed">
</html>

 

(NB. I tried to add a screen shot, but I am getting the following error "You have exceeded your allotted disk space for attachments")

 

"I have also resized and rescaled my browser resolution to see if I could replicate this issue and all I lost was the Indigo background image on the lower right. Nothing else was affected and the footer did not rise above the browser bottom."

 

Did you increase or decrease you screen resolution, I think the only way you could replicate this would be to set a screen resolution larger than ~900px in height.

 

One more thing that is worth a mention, Danny's fix did make a difference by exanding the content area, but because the variable is not dynamic this will only work on certain screen resoltutions.

 

#dynamic-content {min-height: 500px !important;}

 

I hope that this additional information, will help you to understand my issue.

 

I look forward to you reply.



#16 Rob

Rob

    One Smart Egg

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

Posted 17 March 2013 - 02:46 PM

Hi Barry,

 

I have tested using the latest version of IE and Firefox, presumbly you have tested using the same, so I question whether this is a browser compatibility issue

I didn't say earlier that it was a browser compatibility issue, but a browser-specific issue.  Compatibility infers that something would break because the browser cannot accept or use it.  Browser specific means that the browser reads something differently than other browsers.  This can be caused by browser settings, add-ons, etc. There's a major difference between the two. IE, for example, will not accept WordPress' built in image scaling, but Chrome, Firefox, Opera and others do accept and use it perfectly. It's just the way the browser specifically handles that particular code.

 

I dont believe the issue is the the footer is beign forced up, but more that it is sitting at the bottom of the content rather than the bottom of the page (I am not sure if this is the expected behaviour, please could you clarify if the footer should always appear at the bottom of the screen regardless of screen resolution and the amount of page content?)

The footer must, by design, be affixed to the bottom of the template. If you go to Dashboard > PageLines > Drag & Drop, you'll see how the template is laid out.  The page's content extends into every PageLines site's footer. This is what allows you to place content within the footer. The screen resolution, or screen size will have absolutely no bearing upon the positioning of the footer. It will always remain at the bottom of the site as a global element, just as the header always remains at the top.
 

As per my previous note, all plugins have been disabled

Contact Form 7 is placing several javascripts at the bottom of your HTML. Please see below:

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  44.95KB   3 downloads

 

I have used Firefox to inspect this area and all I see is a body.page element, again I am not sure if this is expected?

If you're only seeing the HTML quoted, you need to use the pointer element of Firebug as shown below, and point it to the footer. It becomes part of your cursor once you click the icon that looks like a rectangle with a pointer on it. This will allow you to see more of the HTML code for every part of your site. See below:

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  45.09KB   3 downloads

 

Note: If you cannot add more images, you may wish to use an image upload service like Flickr or Imgur, or just upload the image to your own Media library, and post the URL here.  There's no limit associated for such links.

 

Did you increase or decrease you screen resolution, I think the only way you could replicate this would be to set a screen resolution larger than ~900px in height.

I connected my computer to my external monitor via HDMI, then changed the screen resolution to 1920 x 1080 and viewed the site on a 32" monitor. The footer was in the exact same position I see on the laptop at 1366 x 768.

 

Please be assured I do understand the issue, and I'm taking exceptional care to inspect every possible option.  Unfortunately, I cannot replicate this issue on my screen. I'm sure you understand that if there's a problem that one person sees and another doesn't, the issue is invariably related to the specific conditions of a browser or computer, and not a broad-based problem every visitor sees.  I'd recommend asking a few friends to snapshot their computer's view to determine if others are having the same view or, if they're seeing as I do.  If you know anyone with a large monitor, ask them to increase the screen resolution and see if they're having the issue too.



#17 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 17 March 2013 - 04:23 PM

Thank you for your reply, I appreciate you help in trying to understand this issue 

 

The screen resolution, or screen size will have absolutely no bearing upon the positioning of the footer. It will always remain at the bottom of the site as a global element, just as the header always remains at the top.

 

 

If the content is very little, then am I right in assuming the the footer would appear at the bottom of the site, which could actually be the middle of the screen?

 

Or does bottom of the site, mean the bottom of the usable area on the screen?

 

Unfoirtuantly to complecate matters, I have been contuining to deveop the site as we have been chatting.

 

What do you get for page_id=124, I asked a friend to check and he also see a large grey area at the bottom of the page

 

Thanks,



#18 Rob

Rob

    One Smart Egg

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

Posted 17 March 2013 - 05:14 PM   Best Answer

Hi,

 

For ?page_id=124, I'm seeing the exact same scenario as before; all well.

 

Let me explain the issue of the content within the footer. The footer is a templated section, meaning that within the HTML of the site, the footer always appears as the lowest part of the site. Via HTML, things can be placed below it, but in viewing the HTML, the only things I see below the footer are javascripts - some from PageLines, some from Content Forms 7. These should not cause the footer to adjust upwards, move, be repositioned or enable space below the footer.  I have some of the same javascripts on my sites in the same places.

 

The content fits within the footer, and doesn't extend beyond it, going up or down. If you padded or margined the content within the footer, the effect would be to stretch the footer but not to move it. In other words, the grey background area would increase in height, but there's no possibility of having whitespace below the footer as a result of the content.  If you were to paste a long volume of text, for example, into a text widget in the footer, it would simply stretch the footer the length of the text, plus any padding and margins, but keeps it within the grey backgrounded footer. No matter the length of the content, it's impossible for it to bleed below the footer, without modification of HTML code in core files.

 

The plugin you had, and I know you were kind to remove it, for the cookie bar did place a div below the footer, but in removing the plugin, the div is gone. 

 

I'm going to ask one of my colleagues to look into this.  Apologies for the delay that may entail, but since I can't replicate it, I'm not sure what else to do in order to assist you.



#19 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 17 March 2013 - 05:29 PM

No problem, I appreciate your help and look foward to your reply



#20 Rob

Rob

    One Smart Egg

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

Posted 23 March 2013 - 03:49 PM

Barry,

 

I've had our developer look at your site (in England), and he's seeing exactly as I'm seeing. No space below the footer. 







Also tagged with one or more of these keywords: footer, white space