Background image problem with Firefox and Opera...

Hoping that someone can help me get out of some frustration Smiling

My website is http://www.fakeculture.com and I am having a problem with the background image. (bg.gif) This is the problem:

When I resize the browser window in Firefox or Opera, what happens is that the browser shifts the background image to the left, forcing it out of alignment with the rest of the page. However if the browser is maximised everything appears fine.

I have also tested this site in IE6 and IE7 and there isn't any problem, it works perfectly fine.

I have validated the code and it is totally fine.

Here is my CSS code:

I would be ever so grateful is someone could help.

 

try setting the background position on the image

 

It doesn't seem to matter how I position the image. I still have the same problem...thanks though.

 

I have the same problem. This is the only post that I can find online regarding this problem.

http://www.ithaca.edu/sie

 

Try setting a minimum width on the body {}...

body { min-width:800px; }

 

One small CSS error (not your problem): no colon after padding 0px; in the search form.

Gee it looks like it's actually shrinking your image (since you have that big white part on the left, and the white part of the image is shrinking).

I've never seen anyone set a width on a background image, but it almost seems as though the Geckos (and Opera) are not respecting the set width (960 or so pixels). That or possibly it's shifting the image to the right but I would think then you would not still see the black on the far left.

What other positions have you used besides center? Have you set a top at all? Maybe anchoring it a bit better by setting a top will make FF/Opera behave.

Note just tested in Konqueror and it behaves like IE. That means Safari is also likely to behave too and this tells us that, since Konq and Safari have passed the acid test (whatever that really means in terms of websites), that this isn't some IE bug making the page look right.

 

Well, I'm not sure what exactly was causing the problem, but I was able to fix it by defining a bgcolor in each of the cells that were effected.

 

You shouldn't be using a background image to create colored columns as this should be done by applying background colors to your divs, p.....However, it looks like you have a fixed width page, so if you position the background from the top left, rather than the center, it will stay where you need it to. A center position is obviously going to change based on window size. Use top left and absolute coordinates.

 

Columns are almost always never the same height, and this is why people come over to DP CSS and ask how to get equal height columns... and the answer is faux columns (if you dont want to use a script or don't want to do some very advanced css)

 

What happens when the content of none of the columns fills the height of the page?

 

I wouldn't have that problem, because I would only put the faux column gif on my wrapper.. so if there was no content then nothing would show.

If for whatever reason I applied it to the body{} element then I would just set a background color on html{} and "bye bye bye" to the gif.

Now since you recommend putting a background color and not image for multiple columns where each column has a different color, PLEASE show an example where you do not explicitly state the height of each column/element because they will have dynamic content...

I don't see anyway you could do it without using either the PIE equal height layout or deathshadow's negative margin / content first source order / border layout.

 

I'll save him the trouble and use one of the examples that deathshadow cooked up since I'm not about to code my own.

http://battletech.hopto.org/html_tutorials/3coldiv/template.html