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.
*This is the container for the header. It has a solid background.
*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.
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.