Forums

CraigC

Hi,

I have a 2 - 5 px gap at the bottom of my footer, depending on the browser. This lets a background image show through, which I don't want.

I'm not sure if this is related to a negative margin I set on a "ul class=legal_notice" or if I messed something else up entirely.

Would someone mind taking a look at http://dev.craigcurry.com?

Some possibly relevant code:

	
#footer {
	background: #730707 url(../images/interface/2010_footer_bg.jpg) no-repeat;
	height: 215px;
	width: 960px;
	margin: 0 auto;
	color: #730707;
	font-size: 1.4em;
	}
#footer ul {
	list-style: none;
	width: 960px;
	float: left;
	}
#footer ul.footer_nav {
	float: left;
	width:480px;
	margin: 0;
	margin-top: -126px;
	margin-left: 260px;	
	}
#footer ul.footer_nav li, #footer ul.legal_notice li {
	float: left;
	}
#footer ul.footer_nav li a:hover {
	background: url(../images/interface/footer_nav_bg.png) bottom center no-repeat;
	height: 50px;
	overflow: hidden;
	}	
#footer ul.footer_nav a {
	font-size: 1em;
	height: 50px;
	overflow: hidden;
	}
#footer ul.footer_nav li a.active.home, #footer ul.footer_nav li a.active.about, #footer ul.footer_nav li a.active.recordings, #footer ul.footer_nav li a.active.blog, #footer ul.footer_nav li a.active.contact, #footer ul.footer_nav li a.active.piano, #footer ul.footer_nav li a.active.tutorials, #footer ul.footer_nav li a.active.choral, #footer ul.footer_nav li a.active.shop {
	color: #121b61;
	font-weight: bold;
	display: block;
	height: 50px;
	overflow: hidden;
	}
#footer ul.legal_notice {
	float: left;
	width:300px;
	margin: -18px 0 0 395px;	
	}
#footer a {
	font-size: .8em;
	color: black;
	text-decoration: none;
	float: left;
	display:block;
	padding: 2px;
	}

TheDoc

Remove the height from your quick links lists.

CraigC

Thanks. That did the trick for everything except IE7. There I have a 2px gap at the top of the footer and about a 4px gap at the bottom. (?)

Nipperkin

I'm using Firefox on a Mac and it looks fine. One thing I'm not seeing in your code is:


*footer {
bottom: 0 !important;
}

I've used this to force a footer to the bottom of the page. Why not give it a try?

CraigC

Thanks... tried it, but that didn't work.

Nipperkin

Hmm. Did you reset at the top of your CSS file?


* {
     margin: 0;
     padding: 0;
     }

CraigC

Yes, tried it with the reset also.

I did get rid of the gap at the top of the footer with:

#footer {margin:-3px 0 0 0;}

in the conditional stylesheet.

But no luck with the gap at the bottom.

treehouse : what would you like to learn today?

Forums

Footer issues