alt131 - 6:47 am on Aug 23, 2011 (gmt 0)

thank god i have bourbon.

hmmm ... if bourbon is the solution to code problems I'll take a train-load please ;)

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?

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).

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.

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?