I am building a site in the 960 grid system CSS framework. Please view the first image to see my basic layout mockup (screen shot 003) - this is the mockup that represents the 960 px width. I actually would like the top header background and the mid region background to extend the entire width of the page and not be constrained within the 960 px - SO...

This is essentially what I've tried:

*This is a graphic that represents the exact colors and pixel dimensions 
as the top of the webpage - this image is set to repeat horizontally.

body {
    background-repeat: repeat-x;

*This is the container for the header. It has a solid background.

#containerone {
    background-color: #c7ffff;

*This is the container and image for the midregion - it is mostly solid, but has a 2px contrasting border at the top and bottom of it, so it is set to repeat horizontally.

#containertwo {
    background-image: url(../images/midbg.jpeg);
    background-repeat: repeat;
Screen shot 004 is what the CODED site looks like in Firefox - perfect!

Screen shot 005 is what the coded site looks like in IE - as you can see it does not line up.... very very slightly.

Anyone know what might be happening? I have checked over the dimensions of everything a hundred times. I also have included a CSS reset to override any default IE styling.

Should I just do this another way? Any ideas are greatly appreciated.