Hello,
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:
Screen shot 004 is what the CODED site looks like in Firefox - perfect!Code:*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-image:url(../images/pagebg.jpeg); 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 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.


Reply With Quote
Bookmarks