Background image displays fine in IE but is not positioned correctly in FF

I am very new to CSS and I can't figure out why one of the background images for my site looks fine in IE but it doesn't display correctly in FF. I've looked at a number of threads, but none of those suggestions are correcting my problem.

Here's the CSS code referencing the background image:

.topSlideAndBanner{ background-image:url('images/slideContainerBg.png'); width:975px; height:327px; background-repeat:repeat-x; }

.topSlideAndBanner2{ background-image:url('images/slideContainerBg2.jpg'); width:975px; height:77px; background-repeat:repeat-x; }

.slideNadd{ padding:10px 10px 10px 8px;}

.slideContainer{ width:auto; height:auto; float:left;}
.bannerContainer{ width:auto; height:250px; padding:8px 0 0 10px ;}

Here's the link to the website, http://calanmorningshow.com

It might be a good idea to validate and fix the errors in your markup, see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcalanmorningshow.com%2F

If you want everything left aligned, which the majority of the site is... you can edit your css to replace the .mainPageContainer div to have the margin left to be 0 instead of auto

.mainPageContainer{margin-left: 0;}