alt131 - 6:47 am on Aug 23, 2011 (gmt 0)
hmmm ... if bourbon is the solution to code problems I'll take a train-load please ;)
thank god i have bourbon.
Being serious, I can't reproduce the issue here with some invented html as I'm not sure exactly what the structure is. However, given this has to do with browser re-sizing, and has been momentarily seen on another set-up, it does sound like it could be a redraw issue.
However, some other thoughts - have you validated the css and html to double-check for errors?
If you mean all elements are reducing in width as the window resizes, that is correct. As body is width:100%, it will always be 100% of the viewport width, and any child elements with width:100% will be that width as well. So any "squishing" should be a result of something in the code, such as elements with a fixed width colliding with elements with width auto, or floated or positioned elements.
it looks like the body tag is squashing any of the other elements i have set to 100% as the window size changes.
for testing, i set the body tag to 2000px wide. at that point all of the "squashed" elements looked fine (container, header color, footercolor).
You have position:relative on #container - are any other elements positioned?
Also, you haven't said how much of the background is exposed - if only a few px, could this just be a rounding issue?