Jump to content


Photo

Grey line and white space above footer


  • Please log in to reply
13 replies to this topic

#1 tfitzgerald

tfitzgerald

    Member

  • Members
  • PipPip
  • 12 posts

Posted 15 July 2011 - 06:34 AM

I'm using EcoPro and hiding the Twitter bar and Morefoot footer. I'd like to minimize the white space between the main content area and the footer.

I've worked out this is the custom CSS code I need to do it:
 body{}
	.contentcontainer {
	    min-height: 0;
	}
	.texture {
	    background: none repeat scroll 0 0 #FFFFFF;
	    margin: 0 auto;
	    min-height: 0px;
	    padding: 15px 0 0;
	    width: 1000px;
	}
	.hentry {
	    border-bottom: none;
	    clear: both;
	    margin-bottom: 0em;
	    overflow: hidden;
	.copy {
	    padding: none;
	}

This last item - .copy - is a strange one. If I set the item to 'none' in Firebug it removes the last little bit of extra white space. But for some reason, entering the code into the custom CSS field doesn't do the same. Even with the code entered the page defaults back to
padding: 0 0 25px

Any ideas where I'm going wrong?

#2 catrina

catrina

    Advocate

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

Posted 15 July 2011 - 03:37 PM

Can you post a link to your site? For the last bit of code, I think the CSS selector needs to be more specific.

#3 tfitzgerald

tfitzgerald

    Member

  • Members
  • PipPip
  • 12 posts

Posted 15 July 2011 - 11:22 PM

Hi Katrina

Thanks for your reply. The (half finished) site is here.

With that last bit of code I've tried the below alternatives to no avail.
0 0 0px
0 0 1px

Thanks for your help.

#4 catrina

catrina

    Advocate

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

Posted 16 July 2011 - 03:51 PM

Delete whatever code you were using before to eliminate the white space and use this:

 div.copy {padding-bottom: 0px;}
	body.home #maincontent div.tags {display: none;}


#5 tfitzgerald

tfitzgerald

    Member

  • Members
  • PipPip
  • 12 posts

Posted 17 July 2011 - 03:27 AM

Hi Catrina

Thanks again for your help. I've replaced my custom CSS with that exact code, however, it has the same effect as having no custom CSS in that field. Am I doing something wrong?

#6 catrina

catrina

    Advocate

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

Posted 17 July 2011 - 03:49 PM

Try this:

 #maincontent div.copy {padding-bottom: 0px;}
	body.home #maincontent div.tags {display: none;}


#7 tfitzgerald

tfitzgerald

    Member

  • Members
  • PipPip
  • 12 posts

Posted 17 July 2011 - 10:10 PM

Hi Katrina That option moves the grey line to just underneath the main content area but it doesn't actually remove any space. I'm really just stressing about removing a single linebreak of space. If it can't be done it won't be the end of the universe as we know it! Perhaps we should just leave it here? Thank you so much for your help, though!

#8 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 17 July 2011 - 10:39 PM

Hi, try this:

 .contentcontainer{min-height:410px !important;}
	.texture{min-height:350px !important;}


#9 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 17 July 2011 - 10:40 PM

Or if you just want the .copy class:

 .copy{padding-bottom:0 !important;}


#10 tfitzgerald

tfitzgerald

    Member

  • Members
  • PipPip
  • 12 posts

Posted 18 July 2011 - 02:54 AM

Hi Jimmy

That .copy class line looked as though it was the one I wanted but alas, it doesn't work either.

No matter what I do, firebug still reports at <div class="copy fix":
 padding: 0 0 25px;

If I change the 25px to 0px in Firebug the extra line disappears but for some reason I can't get that change to 'take' in the custom CSS.

#11 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 18 July 2011 - 02:51 PM

Hi Tim,
Try this:
 .copy{padding-bottom:0 !important;}

If that doesn't work, try:
 .fix{padding-bottom:0 !important;}


#12 tfitzgerald

tfitzgerald

    Member

  • Members
  • PipPip
  • 12 posts

Posted 19 July 2011 - 01:06 AM

Hi Katrina

Funnily enough, still no difference. The .fix{padding-bottom:0 !important;} code removes the padding instruction from the code but has no effect on that pesky space! I wonder if I'm entering the code correctly?

The exact custom CSS code I'm using is:
body{}
 .contentcontainer {
	    min-height: 0;
	}
	.texture {
	    background: none repeat scroll 0 0 #FFFFFF;
	    margin: 0 auto;
	    min-height: 0px;
	    padding: 10px 0 0;
	    width: 1000px;
	}
	.hentry {
	    border-bottom: none;
	    clear: both;
	    margin-bottom: 0em;
	    overflow: hidden;
	.fix {padding-bottom:0 !important;}


#13 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 19 July 2011 - 02:27 PM

Hey Tim,
A couple of things. First, I believe the reason the CSS isn't taking is because you're missing an end bracket on the ".hentry" declaration. It should look like this:
 .hentry {
	    border-bottom: none;
	    clear: both;
	    margin-bottom: 0em;
	    overflow: hidden;}

Also, if you only want the space to be gone on the home page, I would change what we gave you to this:
 .home .postwrap .fix {padding-bottom:0 !important;}

Finally, to reduce things even more, you could add this line:
 .home .postwrap .tags{display:none;}


#14 tfitzgerald

tfitzgerald

    Member

  • Members
  • PipPip
  • 12 posts

Posted 20 July 2011 - 01:57 AM

Whew! That's done it! Thank you so much for all your help, Kate, Jimmy and Catrina.