The white gap at the bottom is because of margin collapse and you need to add a dot into the content property in this rule:
The layout overlaps because of the margin-top:-77px on the footer as I explained before. You need to add 77px bottom padding to the last element inside pagewidth to hold the footer at bay. The reason that Firefox doesn't overlap is because it sees the floated content above and as the footer is set to clear it will adjust the top margin so it clears the floats. If you remove the floats then Firefox would overlap also.
That's why I advocate the negative top margin approach on the main wrapper as shown in shown in the link Ryan posted as it doesn't have these problems (although I believe your multiple background images were too awkward with that approach).