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;
}
Safari, for some reason God only knows, shifts the container div 1px to the left. I’m left with three options:
- Somehow target only Safari and use
left: 1px, which I cannot seem to figure a way to do - Change the design
- 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?
I know this one. Had it myself, I went with 3,live with it because it was driving me nuts too and I can think of no way of solving it.
Take heart though, it wasn’t until I actually pointed it out to people that the noticed.
Just FYI, this is the site
§ John Oxton · 29 August 2005
damn my cut & paste that is NOT the site, this is:
http://www.cheltladiescollege.org/
§ John Oxton · 29 August 2005
I can’t believe this isn’t more widely known — or that it’s widely accepted.
§ Sean Sperte · 29 August 2005
heh! I think everyone is too busy banging their head against the IE brick wall to worry about it! :)
§ John Oxton · 29 August 2005
Well at least it’s not just me dealing with this … somehow I feel a bit better knowing someone of (ahem) your stature is in the same boat.
The site you mentioned isn’t working for me at all, actually. Either times out or shows an apache install splash.
§ Sean Sperte · 29 August 2005
The site is working perfectly for me using the latest Firefox (Deer Park). Good looking site (to both of you)!
§ shannonblogs · 30 August 2005
UPDATE: Seems if you resize the browser window one-pixel at a time you can see the gap appear and disappear. If you you resize so it disappears, and reload, it doesn’t render the shift.
§ Sean Sperte · 30 August 2005
has anyone found a solution to this issue? i’m facing the same problem…
thanks
§ pirco · 10 June 2006