Footer issues

[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:

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:

Code:

*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?

Code:

* {
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:

Code:

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

in the conditional stylesheet.

But no luck with the gap at the bottom.

[Author]

Posts