Topic: Centered content jitters

I've seen this before where it's tolerable, but on this site I'm working on, it's just way to noticeable: http://thegannfamily.com/new.php

Resize the window and you should see 1px of the white BG coming through the right of the image in the header.  I believe this is due to the fact that the BG image is just centered on the <body> with background-position: top center; and then the #container is centered on top of that with margin:0 auto;.  I assume it's just messing up because the widths and the ways things are centered with CSS are calculated differently.

So, does anyone have any ideas for how to fix this?

Re: Centered content jitters

Yes, it has to do with your main div width being an even number of pixels wide. So for every other pixel that your browser is resized, it will be slightly off-center, causing a jitter effect. Try adding 1 pixel to your main div, and then putting a correct-width div inside it. So for example, make your outer container 701px, and then use a 700px div inside that.

Ryan Heneise  |  Art of Mission  |  Now with extra-strong Donor Tools mojo

Re: Centered content jitters

If I recall correctly, another way you can fix this is by adding a 1px right border to the html element.

html {border-right: 1px solid #ffff;}

Re: Centered content jitters

Yep, making the container width 701px did the trick, thanks!  Very odd how this fixes it, I guess it just seems like a simple browser rendering error the mozilla team could take care of..oh well, now I know the work around!