Firefox displays my site incorrectly, other browsers fine...

[Ryster]

Hey guys

Please can you take a look at my site for me and tell me if this is a coding problem, or if it's just Firefox being anal?

http://6thfleet.com

Basically I have a Javascript clock on the page. This shows correctly in every other browser apart from Firefox, where it just displays the holding text "Working...".

Also the headers on each of my pages are supposed to be big and bold, however in Firefox they display with the wrong font (Times New Roman perhaps?) and without the bold.

There's also a small gap underneath the menu on Firefox that doesn't appear on other browsers. You'll see what I mean in the picture.

Please see screenshot comparison below between Chrome and the latest Firefox beta.

[Subject Delta]

W3C Validator

You got some errors, but as I am not a coder I haven't got a clue what they mean :p

[Singh400]

Renders fine on IE9 and Chrome. Both say "working" briefly then the clock appears. The text is fine on both.

Using FF Portable, the clock doesn't work at all. Just says "working" all the time. The text renders fine though.

[Ryster]

Renders fine on IE9 and Chrome. Both say "working" briefly then the clock appears. The text is fine on both.

Using FF Portable, the clock doesn't work at all. Just says "working" all the time. The text renders fine though.

Thanks. That is the result I am seeing also. Works fine of Safari and Opera too. Firefox is the only browser that seems to have trouble with it.

Also thanks Subject Delta for the W3C Checker link. I've been though that and corrected a couple of errors, however non were related to the area on the page where the problem is.

[Littlemutt]

I see this in the Error Console:

Error: clockshow is not defined

Source file: http://6thfleet.com/

Line: 60

EDIT: Turning off Hardware Accel renders the page Title correctly, at least when compared against Chrome and your screen-shots.

No idea how to fix that.

[Mr. Half]

I think you need a reference to the 'clockshow' element before you can modify it:

var clockshow = document.getElementById("clockshow");
clockshow.innerHTML = clock;

[Ryster]

I think you need a reference to the 'clockshow' element before you can modify it:

var clockshow = document.getElementById("clockshow");
clockshow.innerHTML = clock;

Brilliant, thanks for that mate. The clock now shows on Firefox too.

Any idea on the incorrect font for the clock and page title?

[The_Decryptor Veteran]

It's because you're using "Arial Black", that'll only work on Windows computers using GDI to render text. Firefox 4 doesn't use GDI to render text.

Instead, use this bit of code.

font-weight: 900;
font-family: "Arial Black", Arial, sans-serif;

That'll do it properly in everything.

Edit: Explaining it a bit better, Arial Black is actually just a weight in the Arial family, not a separate family. GDI couldn't handle that though, so it gets pushed out in apps using it. But on OS X/Linux or apps using DirectWrite, that bug doesn't exist and it gets to stay in the Arial family. Same thing with Arial Narrow as well (though that needs font-stretch, which I don't think anybody implements)

[Ryster]

It's because you're using "Arial Black", that'll only work on Windows computers using GDI to render text. Firefox 4 doesn't use GDI to render text.

Instead, use this bit of code.

font-weight: 900;
font-family: "Arial Black", Arial, sans-serif;

That'll do it properly in everything.

Edit: Explaining it a bit better, Arial Black is actually just a weight in the Arial family, not a separate family. GDI couldn't handle that though, so it gets pushed out in apps using it. But on OS X/Linux or apps using DirectWrite, that bug doesn't exist and it gets to stay in the Arial family. Same thing with Arial Narrow as well (though that needs font-stretch, which I don't think anybody implements)

That fixed it! :) Thanks mate.

Now the only thing left is the slight gap underneath the menu bar. Any ideas on that one? Again, there's no gap shown in anything other than Firefox :)