Jump to content
Sign in to follow this  
tfitzgerald

Grey line and white space above footer

Recommended Posts

tfitzgerald

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?

Share this post


Link to post
Share on other sites
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
tfitzgerald

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.

Share this post


Link to post
Share on other sites
catrina

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;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
tfitzgerald

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?

Share this post


Link to post
Share on other sites
catrina

Try this:

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
tfitzgerald

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!

Share this post


Link to post
Share on other sites
kastelic

Hi, try this:

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

Share this post


Link to post
Share on other sites
kastelic

Or if you just want the .copy class:

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

Share this post


Link to post
Share on other sites
tfitzgerald

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.

Share this post


Link to post
Share on other sites
Kate

Hi Tim, Try this:

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

Share this post


Link to post
Share on other sites
tfitzgerald

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;}

Share this post


Link to post
Share on other sites
Kate

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;}

Share this post


Link to post
Share on other sites
tfitzgerald

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×