Archived

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

  • 0

Gap Under Footer On Some Pages

Question

Posted · Report post

This post is about test.dunwichtype.com. You can view the site with the password “iamtest”.

 

I get a gap underneath the footer. On pages that don’t have much content the gap can be very large, such as:

http://test.dunwichtype.com/information/about-us/

 

Compare that to the 5px gap on:

http://test.dunwichtype.com/fonts/lorimer-no-2/

 

You can also see the gap in the attached image.

 

The problem is not in the content of the page, because I can post content and the problem still occurs. I can strip my custom code down to just a footer color and the problem still occurs, so the problem isn’t there. And my custom code doesn’t change any margins or padding of the Pagelines boxes, so it shouldn’t be a problem anyway.

 

I think this may be the problem mentioned in this thread: http://www.pagelines.com/forum/topic/23550-5px-gap-at-bottom-of-footer/page-2

 

My custom code, minus a bunch of @font-face links, is:

 

body, li, .widget-title, .site-description {font-family: 'Rhodium'; font-weight:normal;}
h1, h2, h3, h4, h5, h6, {font-family: 'Rhodium'; font-weight:bold;}
h1, .fpost .entry-title {font-size: 175%; line-height: 100%;}
h2, {font-size: 150%;}
slogan {font-size: 135%; font-weight: bold;}
buy {font-family: Rhodium; font-weight: bold;}
 
.post-meta { margin-bottom: 0;}
#footer {background: #000; background-image:url('/images/dark_stripes.png')}
.site-title, a.site-title {
  font-family: Rhodium; 
  font-weight:bold; 
  font-size:1.2em; 
  color:#e68500; 
  padding-left:12px;
}
.fittext-container { padding: 0 25px 50px 25px; margin-top:0px;}
#fitbox {font-color:#e68500;}
h2.fittext {font-family: 'DTFHeadlines';}
#buythis {
  width: 125px;
  margin-top: -12px;
  margin-bottom: 15px;
  text-align: center;
  background-color: #1f1f1f;
  background-image:url('/images/dark_stripes.png');
  color: #fff;
  padding: 6px 8px 6px 8px;
  font-weight: bold;
  font-size: 85%;
  border-radius: 8px;
  box-shadow: 0 2px 1px #bfbfbf;
  -moz-box-shadow: 0 2px 1px #bfbfbf;
  -webkit-box-shadow: 0 2px 1px #bfbfbf;
}
a.buythis, {color: #fff;}

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

In this code:

a.buythis, {color: #fff;}

You have a stray comma after buythis. Please remove it.

 

You also have a stray comma here after h6 (remove it too):

h1, h2, h3, h4, h5, h6, {font-family: 'Rhodium'; font-weight:bold;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for pointing out the stray commas. I got fixed them, but that doesn’t fix the problem (as noted above, I can delete all custom code save the footer color and the problem still occurs).

Share this post


Link to post
Share on other sites

Posted · Report post

Is the fix to add

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

to my custom code? Because I tried that and it doesn’t work. Does it go somewhere else?

Share this post


Link to post
Share on other sites

Posted · Report post

Well you must not be adding it correctly, because it seems to work for everyone else.

Share this post


Link to post
Share on other sites

Posted · Report post

I think I am actually seeing two different problems. On the pages with long content, where before I had the 5px gap, the problem is fixed. But on page with short content the big gap is still there, see http://test.dunwichtype.com/information/about-us

Share this post


Link to post
Share on other sites

Posted · Report post

That gap you're talking about is the end of the page. That's normal. 

Share this post


Link to post
Share on other sites