I have recently been working on sites which have had the need for pixel perfect alignment, and I came across an alignment anomaly among the major browsers.

Previously, I have used IE7/ IE6 specific style sheets with completely new backgrounds, each 1px to the left or right of the original to compensate, but I decided to do some digging and found this blog post:

http://www.sohtanaka.com/web-design/1px-background-alignment-bug/

One of the comments I came across suggested a very simple alternative to multiple stylesheets and images, and is the version I used in my recent design:

html{background: #242424 url('../img/background.gif') repeat-y center; margin-left: -.1px; /*1px shifting hack*/}

A simple use of a margin allows the same image to be used for all browsers. What’s even better is that, although technically a hack, it is valid.