Footer sit at bottom - bg image not repeating

[rickysims]

for the love of god, why!

First problem ... IE and Mozilla are adding scrollbars for my footer ... I can't figure out why. Position is relative, and should sit at bottom: 0 ... yet, the scrollbar appears regardless.

http://www.rickysims.com/css-test/test1d.htm
http://www.rickysims.com/css-test/test1d.css

Second problem ...

Could someone please tell me why Mozilla ignores nearly every setting I give it ??

http://www.rickysims.com/css-test/test1e.htm
http://www.rickysims.com/css-test/test1d.css

Why is the background image not repeating all the way down ?? ... it only repeats down to the intial 100% of the browser (meaning, whatever height the browser size has when it's first opened) ... why doesn't it repeat the background like I told it to ?? It should repeat the background all the way to the bottom of the DIV ... is there any way to do this ?

Yes, I've been to pmob's site ... the lovely 2 column template is where I got most of this (modified to suit my needs).

So far, IE does pretty much what I tell the CSS to do .. and, Mozilla ignores much of it (ignores border styles, background colors, height, width, alignment, and now this ridiculous repeating background problem).

Thanks for any help - this is driving me looney!

[Tyssen]

Don't see any scrollbars on your footer. Add overflow: hidden to #mainWrapper.

[rickysims]

Sorry, I didn't mean scrollbars on the actual footer (if that's what you mean) ...

How do I explain this in the right words ... the footer is told to sit at the bottom of the screen - but it sits below it (creating scrollbars when there shouldn't be any).

position: relative;
bottom: 0px;
left: 0px;

I've tried bottom: -52px; (the height of the footer), but that obviously doesn't work.

Any ideas ?

The main thing driving me nuts - is the background not extending in FireFox.


ps. overflow: hidden doesn't work - because it hides extra content (if the text extends past the initial height of the browser)