Geek & Mild by Sean Sperte

1 pixel off

Tweaking this site has uncovered a slight rendering issue with Safari. It shouldn’t be a big deal, but it’s driving me crazy. I’m searching for answers.

I know I shouldn’t be as bothered by this as I am, but I just cannot seem to let it go. I’ve scoured the web for a solution and no one seems to even recognize it as an issue.

Here’s the deal: I’ve got a single background image (for <body>) set to be center-aligned and repeat vertically. Then, I’ve got a div container set at 400px wide, centered. Here’s the basic CSS:

body {
    margin: 0;
    padding: 0;
    font-family: 'lucida grande','trebuchet ms',sans-serif;
    background: #fff url(/images/bg_fullbody2.gif) top center repeat-y;
    }
#container {
    width: 460px;
    margin: 0 auto;
    position: relative;
    border: 0;
    }

Screenshot showing the 1-pixel shift rendered by SafariSafari, for some reason God only knows, shifts the container div 1px to the left. I’m left with three options:

  1. Somehow target only Safari and use left: 1px, which I cannot seem to figure a way to do
  2. Change the design
  3. Live with it (please note that this is hardly an option, it just seemed better to list three)

So, being that I have no time for option number two, and option three is out of the question, is there an answer for number one?

28-Aug 2005
Ads by Fusion