Body background image shifting in Firefox 3.01
newbie
Posted: Mon, 2008-07-21 20:37
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;
}
Enthusiast
Posts: 223
Joined: 2008-03-16
455 errors
Posted: Mon, 2008-07-21 21:01
You might want to correct the 455 errors before seriously expecting anyone taking the time to care for 1px
newbie
Posts: 2
Joined: 2008-09-11
Location: California
slobjones wrote:I've noticed
Posted: Thu, 2008-09-11 02:21
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...
Moderator
Posts: 6662
Joined: 2004-05-01
Location: Brisbane
IrishChieftain
Posted: Thu, 2008-09-11 06:00
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
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
newbie
Posts: 4
Joined: 2007-10-10
Turns out it's a "known bug"
Posted: Thu, 2008-09-11 07:43
Turns out it's a "known bug" in Firefox 3.01:
https://bugzilla.mozilla.org/show_bug.cgi?id=446284
newbie
Posts: 2
Joined: 2008-09-11
Location: California
1px Jog
Posted: Thu, 2008-09-11 10:15
Hi Tyssen
Thanks for the heads-up.
IrishChieftain
newbie
Posts: 4
Joined: 2007-10-10
For that matter, sign up for
Posted: Thu, 2008-09-11 18:49
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.
newbie
Posts: 1
Joined: 2008-10-06
Same problem...?
Posted: Mon, 2008-10-06 17:56
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