hey all. currently working on www.mcconathylaw.com/staging/dwiquestions1.html (css is at www.mcconathylaw.com/staging/assets/main.css) and am seeing a couple of problems with my layout. i'm using a sticky footer that i found online that requires the #footer and #push (#push pushes the footer past the bottom of the content) and am having some problems.

on any page that has links toward the bottom of the content, they are not click-able. i think it has something to do with the #push div keeping them from working. so far, i've only tested it on ie7 and ff2 and ff works fine. here are screenshots that i took that might help explain...



with the content highlighted so you can see the #push div:





the other problem is that ie7 is rendering the footer at the bottom of the content, but firefox is putting space between them.

in ie7:



in ff2:



any guidance is greatly appreciated!!!

I really don't see the point behind the #push div, or the negative margin on the footer. Everybody seems to want to complicate getting a footer to stay below the content area.

One thing I noticed is that you have not cleared your floats, something you have to do.

IE 6 does NOT support min/max height or width, so you'll have a problem there too.

Clear your floats, then see what FF does.

i don't understand. my floats are cleared. the only floats i have on this page are the #nav and #main divs. and i cleared those. what other floats need to be cleared?

So you did, sorry, but you need to close it up, and you really shouldn't use a div. Anyway, add this to the clearing div rules:

height: 0;
line-height: 0;
margin: 0;
font-size: 1px;

The extra space between the footer and and the content is coming from the default margin and padding on the UL in the footer. Add this and it will go away:
#footer ul{ margin: 0; padding: 0;}