Firefox 3 Removing Background

[BKerr]

Hello All,

I've had this issue since Firefox 3 has been released, and just got around to trying to fix it now.

It appears that FF3 is removing the background attribute from the CSS when loaded.

Offending Site is here: http://www.surpassarcade.com/
You will notice the difference right away when loading in IE.

This is the code in the CSS file:

body {
	margin:0;
	padding:0;
	min-height: 100%;
	background: #4e8333 url('../images/container_bg.jpg') top repeat-x left;
	text-align: center; /* for IE */
	height: 100%;
}

But when FF3 loads it, it produces:

body {
height:100%;
margin:0;
min-height:100%;
padding:0;
text-align:center;
}

(obtained via Firebug)

Has anyone else had this problem or know why its occurring?

Thanks.

[BKerr]

Fixed, Nevermind.

[Leadeye]

Hi,

How did you end up fixing it, as I am having pretty much the same problem (only it applies to a <div> tag).

Cheers
Leadeye

[Leadeye]

Solved!

I just had to add overflow: hidden;.

That was a new one for me...

Cheers
Leadeye

[Paul O'B]

Hi,

You are saving your css files with a BOM (byte order mark) which is corrupting the first selector in the css file.

The browers is seeing a style like this.

html { height: 100%; }
.box {
height:auto;
}

Which of course doesn't exist.

Look at the css file using the webdeveloper toolbar in Firefox (edit CSS) and you will see the strange bom characters (&#239;&#187;&#191 at the top of 2 of the css files. If you don't know what a BOM is then read Tommy's sticky thread in the html forum about character encoding. Suffice to say you should remove those characters and stop your editor from outputting them in the first place