Why does having a transitional doctype, cause my javascript to fail in WebKit and Opera Browsers

I am trying to get a mouseover script to work,

when there is no doctype set the script works fine in all browsers I test, but the site looks like a dogs breakfast

However When i set the doctype to transitional (it has to be this doctype) Firefox and IE8 (&compat mode) work fine But Opera and the webkit browsers can only display the popup above the page fold, so if you scroll down the page and go over an image the popup appears above the visible page.

And I can't figure out why, there are a couple of instances of document.all in the code, but my attempts to replace these have broken the code, besides the fact it works in Firefo开发者_开发百科x and not Opera makes me think that document.all is not the issue

Any help would be appreciated, even just telling me why a doctype would effect Javascript would be a help.

Here is the site without a doctype

Here is the site with a doctype

The differing DOCTYPE won't affect the javascript. Instead, it will be affecting the html/css rendering.

Although, you may want to consider some differences it may pose that affect the javascript

The DOCTYPE declaration informs the browser how it should be parsing the page. When there is no DOCTYPE the browser may make different assumptions and hence produce a different rendering.

In fact, with no DOCTYPE chrome is assuming that the doc type is HTML 4.01 Transitional, not XHTML 1.0 Transitional as you specify in your other page. This will generally lead to different renderings.

Looking into your Javascript, it does some checks to determine what browser it is and how it should render it. Your best bet would probably to use a mature javascript library that correctly handles cross-browser support. I would offer JQuery as an example of a decent framework to use. It has plug-ins to support exactly the feature you ar trying to implement and many many more.