setting doctype breaks my css and javascript

Question

And it can be any doctype, html5 or any of the html4's.

Specifically, if I don't set a doctype everything is fine. If I set a doctype, the colors set as such:

  #Engine {
    color:Sienna;
  }

  #Gameplay {
    color:Green;
  }

  #Art {
    color:Chocolate;
  }

are ignored. A few other tags are also ignored, mainly relating to id's I think. I can set the font size to be as large as the screen and nothing happens.

The css passed ok with the css validator, as did the html with the html validator ( when I inserted the doctype, not before).

Also the javascript that normally runs without a hitch breaks, failing to find the "offset" method of a jquery node...

Effect is same in chrome and firefox (latest versions). Won't load at all in internet explorer with or without doctype, but that's for a separate topic...

Answer 1

The probable cause is that in your markup, you have spelled the id values differently from the spelling of the id selectors. If you have id="engine" in markup, then the element does not match the selector #Engine in “Standards Mode”. In Quirks Mode, it apparently does. (This seems to apply to newest released versions of Chrome, Firefox, and IE.)

The solution is to make sure that you use exactly the same spelling in each occurrence of an identifier defined by an id attribute. The definition of id in the HTML 4.01 spec clearly designates it as Case Sensitive.