Common advice is that for the 1024 resolutions you have a maximum width of around 960 or 980px to work with. But if you really need to get every last pixel in, I can confirm test results from Windows XP running at 1024×768, with Internet Explorer 6.0 fully maximized, gives you a width of 1007px to work with.

* Of course, fluid layouts are also nice.

Bug description: When having a centered background image over a centered <div> (like a drop shadow over a main content <div>), the background image’s position would sometimes be “off” by 1px as the viewport in Safari, depending on the width of the viewport.  So half of possible viewport widths would show the incorrect version.  While 1px isn’t the end of the world, it can really hurt a design, and it’s nice to get center alignment in Safari/Chrome to work like Firefox/IE.

Example code:

body {
    background: #f8f8f8 url(../images/dh_bg.jpg) 50% 0 repeat-y;
}
div#everything {
    width: 980px;
    margin: 0 auto;
}

Partial Solution: First of all, always use an even-width background image – this way the rest of the browsers will get it right automatically.

To fix Safari we can apply a CSS hack targeted towards WebKit.  If your background image’s width is just a little wider than your main <div>, then this will fix it:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        background-position: 49.999% 0;
    }
}

The problem with this is that if the viewport is resized to be a little larger than your div, but not as large as your background image, then the 1px problem comes back.

Real Solution:
So my solution is always use an even-width background image that is wider than the devices you want to support. I made mine 5000px wide (which is still < 1kb).  Then, the following CSS works great:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        background-position: 50.001% 0;
    }
}

Hope that helps somebody.

Thanks to the helpful comments on Rob Goodlatte’s post (a JavaScript solution), which helped point me in the right direction.

Here is the CSS:

ul.menu {
margin: 9px 9px 0 9px;
padding: 5px 0px 6px 10px;
border-bottom: 1px solid #afafaf;
}

ul.menu li {
margin: 0px;
list-style: none;
display: inline;
}

ul.menu li a {
margin: 0;
padding: 5px 12px 6px 12px;
border: 1px solid #afafaf;
background: #DDE;
font: normal 12pt Georgia, 'Times New Roman';
color: black;
text-decoration: none;
}

ul.menu li a:hover {
background: #333;
color: #eee;
text-decoration: none;
}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
border-top: 1px solid #afafaf;
border-bottom: 1px solid white;
background: white;
color: #333;
text-decoration: none;
}