Footer Help Options

[xoxoannieee]

So I am very new at creating things with HTML and CSS (this website is actually for a class project).

I tried to do something different on the Photos page and do a hover effect with the enlarged image. However, it completely messed up my footer on just this page. Any ideas for why and what can I do to fix it?

http://uniquelydone.annderleth.com/photos.html

Thanks!

[Frederiek]

I suppose you talk about the fact that the footer is not quite at the bottom of that page.

See:
http://www.cssstickyfooter.com
http://ryanfait.com/html5-sticky-footer/

[xoxoannieee]

Yes, but it is only on this page, none of the others....

[pandy]

Yes, that's strange. I see nothing that jumps out as different on that page, but there must be something.

[Christian J]

FWIW it goes away if you stop the SPAN thumbs from flowing to the second row (either by removing thumbs or by making #content wider). You can also "fix" it by adding this:

CODE

.enlarge span {display: none;}

Apparently there's something related to those SPANs. It also seems #wrapper changes height when I hover the thumbnail SPANs. Why is that, when the SPANs are positioned absolute?

The FOOTER element is supposed to appear just below #wrapper, which BTW has some contradicting height styling:

CODE

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -2em;
}

Also note the negative bottom margin, which drags FOOTER up behind #wrapper. Why do you want it to do that? In some cases it makes content text on cabinets.html spill over the footer.

[xoxoannieee]

Thanks for the help so far. If I do the display: none, it doesn't do the hover effect anymore...

[Christian J]

I know, it was just to demonstrate the SPANs' involvement...

[xoxoannieee]

Oh, okay. Thanks.