7 replies [Last post]
slobjones
Offline
newbie
Last seen: 12 years 25 weeks ago
Joined: 2007-10-10
Posts: 4
Points: 0

I've noticed that my body background image is shifting about 1px to the left in Firefox 3.01 only, causing some white space to show on the left border.

Has anyone else experienced a similar problem? This did not occur in previous versions of FF, or in any other browser.

Site: http://tinyurl.com/5au66p
Style sheet: http://tinyurl.com/6xwzbf
Body bg image: http://tinyurl.com/56fcnl

Relevant portion of CSS:

body {
font-family:Arial, Helvetica, Sans-Serif;
font-size:62.5%;
min-width:926px; /* Prevent background from shifting */
background-color:#CCD2F1; /* matches edge color of background image */
background-image:url(../images/bodywrapper-gray.gif);
background-position:center;
background-repeat:repeat-y;
}

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 4 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

455 errors

You might want to correct the 455 errors before seriously expecting anyone taking the time to care for 1px

IrishChieftain
Offline
newbie
California
Last seen: 12 years 25 weeks ago
California
Joined: 2008-09-11
Posts: 2
Points: 0

slobjones wrote:I've noticed

slobjones wrote:

I've noticed that my body background image is shifting about 1px to the left in Firefox 3.01 only, causing some white space to show on the left border.

Has anyone else experienced a similar problem? This did not occur in previous versions of FF, or in any other browser.

Site: http://tinyurl.com/5au66p
Style sheet: http://tinyurl.com/6xwzbf
Body bg image: http://tinyurl.com/56fcnl

Relevant portion of CSS:

body {
font-family:Arial, Helvetica, Sans-Serif;
font-size:62.5%;
min-width:926px; /* Prevent background from shifting */
background-color:#CCD2F1; /* matches edge color of background image */
background-image:url(../images/bodywrapper-gray.gif);
background-position:center;
background-repeat:repeat-y;
}

This did not happen in Firefox 3.0. Apparently this is the 1px jog that Firefox has been slinging at IE for years, how ironic. Version 3.0.1 was supposed to be a security fix and no more. Obviously someone is telling lies. I had to uninstall it and grab the older version to work with as 3.0.1 was messing up almost every site I was working on.

AFAIK, this is a rounding error which occurs when we center an image, say, on the page and the browser then has to do the math to calculate how many pixels to put on either side of it.

There is a hack to fix it, but that is not the way to go. Has anyone got any more info on this bug? I already reported it to them weeks ago but I have given up looking for an answer at Mozilla...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 20 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IrishChieftain

IrishChieftain wrote:

Apparently this is the 1px jog that Firefox has been slinging at IE for years, how ironic.

It's a 3px jog in IE and it's related to a different issue and it's not been Firefox that's been slinging it - it's developers aware of what the standards should be.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

slobjones
Offline
newbie
Last seen: 12 years 25 weeks ago
Joined: 2007-10-10
Posts: 4
Points: 0

Turns out it's a "known bug"

Turns out it's a "known bug" in Firefox 3.01:

https://bugzilla.mozilla.org/show_bug.cgi?id=446284

IrishChieftain
Offline
newbie
California
Last seen: 12 years 25 weeks ago
California
Joined: 2008-09-11
Posts: 2
Points: 0

1px Jog

Hi Tyssen

Thanks for the heads-up.

IrishChieftain :thumbsup:

slobjones
Offline
newbie
Last seen: 12 years 25 weeks ago
Joined: 2007-10-10
Posts: 4
Points: 0

For that matter, sign up for

For that matter, sign up for a Bugzilla account and vote for this bug to help ensure that it gets some attention.

It's only received three bumps so far.

renoir
Offline
newbie
Last seen: 12 years 21 weeks ago
Joined: 2008-10-06
Posts: 1
Points: 0

Same problem...?

I have a problem with a site I'm developing which maybe related. For such a small issue it is VERY annoying...especially as I cannot pinpoint what is causing the issue.

I have a centered horizontal background slice which repeats (y-axis) underneath my main wrapper for all of my content (header, menu, content , footer etc).

IE6 and 7 behave the same, Firefox does it's own thing and so does Safari.

URL
http://www.cleancuisine.co.uk/index.asp

CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #333333;
background-color: #f6921e;
margin: 0px;
background-image: url(../media/gfx/clean_cuisine_slice.gif);
background-repeat: repeat-y;
background-position: center;
text-align: center;
}
#wrapper {
width: 960px;
margin-right: auto;
margin-left: auto;
height: 100%;
text-align: left;
}

The slice is 1040px wide with a 960px wide white area to give the shadow effect on the outside.

EI6/EI7
Looks like the background has moved over to the RIGHT by 1px.

Firefox
All pages okay except "http://www.cleancuisine.co.uk/services_pricing/index.asp" where the background has moved LEFT by 1px.

Safari
All pages okay except "http://www.cleancuisine.co.uk/services_pricing/index.asp" entire page shifts slightly - probably another issue.

If anyone has the time I would appreciate some advice?

Thanks