Alignment issues

Ever have this problem where your centered elements will “wiggle” out of place when you adjust the size of your browser?  It’s just by one pixel, and annoys me to death.

I found this article about it: http://acko.net/blog/css-sub-pixel-background-misalignments

It seems like it’s a margin/padding issue.  I took the offending div element and added “margin-left: 1px;” to it’s class and it worked!  Beautifully :)   You may also need to nudge any background images by one pixel.

It does concern me that other elements on the page align perfectly, where it was only the #footer div that was giving me grief.

UPDATE

The aformentioned fix applies to 100% divs that have a centered background.  I came across this same problem in a div that was set to margin:auto;.  I went ahead and added “margin-left: 1px;” to the body and that fixed everything up nicely :)




Tags: , , , , ,
This entry was posted on Tuesday, February 16th, 2010 at 12:21 pm and is filed under CSS/HTML, Scripting. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

(required)

(required)