• Registered: 2006-10-12

Topic: FF3 1 pixel background shift

Several of my web sites have a background image centered on the page. Then I have a title image centered in an H2 tag over that. Everything was fine with IE and FF2. When FF3 came out, I'm noticing my title image is shifting 1 pixel to the right. Then has nothing to do the width of the browser (ie even or odd pixels wide). Here is one of the web sites in question: http://chiltonlogging.com/ Notice the whole title image is shifted to the right 1 pixel, making a 1 pixel strip on the left. Any ideas how to fix this?

http://www.farnellfamily.com/

McFarnell's Website

  • From: Somerset, UK
  • Registered: 2007-06-21

Re: FF3 1 pixel background shift

I think it might be to do with background.gif on body.  That image is an odd number, whereas #container/#header are even.  It looks like there's a spare pixel a bit of background.gif is sneaking through.  It's similar to what's going on with cbarr's thread!  If I add border-right:1px solid red; on body it goes away (granted a get a red line, but that proves what's going on!).

So you might be able to add: border-right: 1px solid #4B2C00; to body or (probably better) take a 1px out of background.gif (so it's 778 wide).

James Cooper --  God loving, banjo playing, geek!

jpc101's Website

  • opus
  • Nostalgist
  • Offline
  • From: Lincoln, NE
  • Registered: 2006-01-16

Re: FF3 1 pixel background shift

Along the lines of what jpc101 mentioned, I've often found that I can get rid of most of these alignment issues if I make sure that the width of my background images, DIVs, and whatnot are all even numbers.

I feel a nostalgia for an age yet to come...

opus's Website

  • Registered: 2006-10-12

Re: FF3 1 pixel background shift

Hi guys,

Thank you for those ideas. I tried the border-right trick on the body, and that did help somewhat in FF3, but when I expand and contract FF3's window, the background shift is random (ie, every-other pixel width change in the window size makes the background show up right and wrong, etc.) Also, this same problem happens in IE when I do the border-right trick.

If I make the background a width of 780, it causes the same problem of the shift being random depending on window size, in both FF3 and IE.

The way I have it now, the problem is consistent in FF3 only, but not IE. The background stays in the same place on both, no matter the window size. So it seems to me like I need a conditional statement to move the background over 1 pixel if the browser is FF3.

Any other ideas? Thanks so much for the input.

http://www.farnellfamily.com/

McFarnell's Website

  • Registered: 2005-12-21

Re: FF3 1 pixel background shift

I usually start with a CSS framework like Blueprint (http://www.blueprintcss.org/) or 960 (http://960.gs/). Using the pre-established grid system usually prevents these sorts of problems altogether.

Ryan Heneise  |  Art of Mission  |  Now with extra-strong Donor Tools mojo

ryenski's Website

  • C.Barr
  • Interface Developer/Designer
  • Offline
  • From: Pensacola, FL
  • Registered: 2006-12-05

Re: FF3 1 pixel background shift

I had this exact problem recently and I was able to fix it by changing the width of my container div from 700px to 701px

Here's the thread about it: http://godbit.com/forum/viewtopic.php?id=4181

http://chris-barr.com | http://ejectmedia.net

C.Barr's Website

  • Registered: 2006-10-12

Re: FF3 1 pixel background shift

Wow, thanks Chris! That worked for me, too. I can't figure out why though, as my container was 744px wide, and my background header image is 744px wide, too. But I changed my container to 745px, and it seems to work fine.

http://www.farnellfamily.com/

McFarnell's Website