Ben, great that you found a fix, but I still wonder about this:
so, if i restore the screen down and the resize it by dragging the screen horizontally so that my browser window is smaller than my fixed image (960 px) so that i get a scroll bar at the bottom of the screen and i scroll it over to the right, then the header and footer are now smaller...
If you mean the colour header and footer "ends" as you scroll to the right, so the elements with a fixed width appear to protrude out of the body to the right - something like this: //////////parent////// ///////////////////// **********fixed width element****** ****************************** //////////////////// ///////////////////
That is correct behaviour as the elements with width:100%, or block elements with no width that will automatically expand the full width of the viewport are obediently re-drawing themselves to 100% of the viewport width on resize. However elements with an explicitly set width that is greater than the viewport will overflow and force the scroll bar. Observe this in action by setting a border on the width:100% elements then resizing the viewport as you describe.
Your description suggests the desired layout is for elements that currently have width:100%/auto to never re-size less than the width of the smallest fixed-width element. If I am right, that is a fixed-width layout and rather than setting background-colors to "hide" the fluid width, I'd suggest a better solution would be to tell the browsers what you really want by setting a min-width on the parent containers.
However, also note this seems the opposite of the problem reported in the OP - which seemed to be that the fixed-width elements were resizing smaller than their explicitly set width leaving the colours of the parent elements exposed even though the viewport width should have been wide enough to contain them.