Firefox layout broken by background image - IE works fine

Hi Everyone

This is my first post here and my first post anywhere about web standards.

I am developing my first web standards compliant site and have discovered the solution to a problem I had but would like to understand the issue better.

As far as I know the problem only occurs in Firefox and only on some computers. Actually the only computer I know it occurs on is mine. It doesn't happen at work and it doesn't happen on a friends computer.

On my home computer in Firefox when you click on a link that takes you from one page in the site to another and then go back to the home page the layout breaks. Ctrl-+ or Ctrl- fix it until you click the link again.

The problem is caused by this css for the banner image across the top of the page.

#header #logo {
background-color: #36558E;
background-image: url(baywalk.jpg);
background-repeat: no-repeat;
background-position: left;
width: 1280px;
height: 178px;
}

If the width is set to 1006 or above it breaks on my computer. 1005 or below it works fine.

The image itself is 1280x178 and displays fine on my 1024x768 home machine except for the right part of the image being cut off, of course.

As expected when set to 1005 the right 275px of the header shows the background color not the image.

The code below fixes the problem fine but I read in a book (I believe it was one of Dan Cederholm's) that you should always define the size of your images.

#header #logo {
background-color: #36558E;
background-image: url(baywalk.jpg);
background-repeat: no-repeat;
background-position: left;
/* width: 1006px; */
height: 178px;
}

I'd like to understand what's going on. The 1005/1006 breaking point seems very odd.

Is it possible to provide a full example (with the html portion as well) that breaks on your computer? Let alone, define breaks... perhaps screenshots? I assume things are shifting unpredictably.

It is true that you should define width and height for your images, but keep in mind that you don't seem to be defining an image. You're using a background, which is very different.

Are you running a different version of Firefox at home than at work/friend's place?


P.S. Dan Cederholm's book rocks =)