Firefox CSS Problem

liunx

Guest
When this site is first loaded the main div in the center of the page doesn't show correctly, but when you refresh it does.

Any idea what is causing this and how to fix it?

URL: <!-- m --><a class="postlink" href="http://www.mitcourse.co.uk/robertson/There">http://www.mitcourse.co.uk/robertson/There</a><!-- m --> are two things that need to be done before trouble-shooting CSS bugs in any browser (Yes, even IE-Win): 1) Validate the HTML (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->); 2) Validate the CSS (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->). I think your biggest problem is not working in Standards Compliance mode (Related article: Fix Your Site With the Right DOCTYPE! (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->)).

In order to bump browsers into Standards Compliance mode, you need:

1) A proper DOCTYPE tag.

2) A <meta> content-type tag specifying which character set the page is using.

This gets rid of a lot of the quirkiness of browsers, and oddly enough, working in non standards compliance mode is called Quirks Mode (which your page is currently getting rendered in).After recently updating firefox (might not have been this) I noticed that my css style sheet was not being picked up in only firefox.
Dreamweaver was using the following as a default

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

this no longer works for the style sheet, I replaced it with the following and it now works

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

difficult to debug.

cambridgeshire online <!-- w --><a class="postlink" href="http://www.cambs.euFor">www.cambs.euFor</a><!-- w --> a list of doctypes and which mode (quirks or standard) they trigger in various browsers, check out:
<!-- m --><a class="postlink" href="http://hsivonen.iki.fi/doctype/">http://hsivonen.iki.fi/doctype/</a><!-- m -->
(scoll down until you get to the table)

Also, if you ever want to check what mode Firefox is rendering your page in you can right click somewhere on the page and choose "View Page Info", and you will see a "Render Mode:" section.
 
Back
Top