I am so close to getting the TinyMCE editor to work at our site. The necessary scripts when adding a discussion are loading.I can see them in the HTML source. And my domain is properly registered for the API key I'm using. And the id/name of the textarea is correct. But the editor itself doesn't load for the textarea.
There is just one JavaScript console error:
Failed to initialize the editor as the document is not in standards mode. TinyMCE requires standards mode.
Does anybody know what "standards mode" is and how I can make sure the page served is in standards mode?
A big never mind. I found the solution. The document was in so-called "quirks" mode because there was no DOCTYPE. I added this on top and the editor worked just fine!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Even later I discovered something that might help.
Check if the first tag is of the <!doctype html>.
In my case a tag was taking the first place.
Related
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
HTML: What is the functionality of !DOCTYPE
I recently asked a question here and the solution was a simple:
You need to add a doctype to the page. This should fix the issue for you.
Now, my pages work fine in every browser without the doctype (except IE). Does IE need a doctype (is this an IE only thing) and do other browsers just assume it OR or is it doing something I'm not seeing.
What are its functions and how does it work?
All browsers need the doctype. Without the DOCTYPE you are forcing the browsers to render in Quirks Mode.
However, DOCTYPE was only partially used by the browsers in determining dialect and parsing, even though that was the purpose. This is why HTML5 has reduced the DOCTYPE to simply:
<!DOCTYPE html>
2.2. The DOCTYPE
The HTML syntax of HTML5 requires a DOCTYPE to be specified to ensure that the browser renders the page in standards mode. The DOCTYPE has no other purpose and is therefore optional for XML. Documents with an XML media type are always handled in standards mode. [DOCTYPE]
The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax. DOCTYPEs from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the DOCTYPE is only needed to enable standards mode for documents written using the HTML syntax. Browsers already do this for <!DOCTYPE html>.
Source: HTML5 differences from HTML4: DOCTYPE
The Doctype does two things.
It identifies which dialect of HTML you're using.
It controls whether the browsers uses "standards" or "quirks" mode to render the document.
If there is no doctype, or there's an unrecognized one, then it uses "quirks" mode and interprets the document as best it can. If there IS a doctype, and it recognizes it, then it follows the standards. The results of the rendering can vary depending on how it interprets the document.
Why?
Why specify a doctype? Because it
defines which version of (X)HTML your
document is actually using, and this
is a critical piece of information
needed by some tools processing the
document.
For example, specifying the doctype of
your document allows you to use tools
such as the Markup Validator to check
the syntax of your (X)HTML. Such tools
won't be able to work if they do not
know what kind of document you are
using.
But the most important thing is that
with most families of browsers, a
doctype declaration will make a lot of
guessing unnecessary, and will thus
trigger a "standard" rendering mode.
Source: http://www.w3.org/QA/Tips/Doctype
You should have a DOCTYPE for ANY browser. It tells the browser how to interpret the html and css. This is why html4 and html5 have different definitions (as does xhtml). All very important for validation.
What IE will do is put the document into what it calls 'quirks mode' which basically ignores a whole heap of rules for how CSS should (by modern definitions) behave. Here is a good summary of the issue. It harks back to the bad old days of non-standardised CSS support
Browsers need at the least to render in what is known as standards mode. See John Resig's article on the html 5 doctype: http://ejohn.org/blog/html5-doctype/. Now if you want your browser to not use standards and render like its 1990 go ahead and not add anything and you will see floats and other now standard items not work correctly. If you want to have your page render/validate in accordance to a particular standard then you would want to add more to the doc type but it is not necessary.
From W3Schools, a doctype is "an instruction to the web browser about what version of the markup language the page is written in." (http://www.w3schools.com/tags/tag_doctype.asp)
If you do not include the doctype, the browser may assume you are using a different language than you really are, causing it to be rendered incorrectly.
From W3Schools.com:
The doctype declaration is not an HTML
tag; it is an instruction to the web
browser about what version of the
markup language the page is written
in.
There are a handful of different doctypes, and changing them can drastically change how your page renders.
The doctype declaration should be the
very first thing in an HTML document,
before the tag.
The doctype declaration is not an HTML
tag; it is an instruction to the web
browser about what version of the
markup language the page is written
in.
The doctype declaration refers to a
Document Type Definition (DTD). The
DTD specifies the rules for the markup
language, so that the browsers render
the content correctly.
Reference
I am confused... all the pages start with
<!DOCTYPE html>
<html lang="en">
<head>
<title>...
When I view the source in Firefox, the first line is in italic. Is it commented by FF (last mac version 98.0.1)?
In the web tools console, FF sometimes (not for all the pages) displays a warning saying that the page is in quirk mode and may affect the rendering.
I have read a lot on the subject but I don't seem to understand what I can do to fix this.
Help would be appreciated.
Is it possible for you to inject an iframe without the doctype or for some third party tracking pixel to do it?
If that's the case, I'm afraid your problem is caused by that, you have an answer to the reason here:
Dynamic iframe inserted into document that is standards mode defaults to quirks mode
when using Perl CGI, it always print out the: <"DOCTYPE html ".... > header before printing out the rest of the html body, which messes up the proper display of the web page. I guess the cause is the DOCTYPE still references a very old version of HTML. This first line get generated regardless when I use $query->start_html(...);. So the question is, how to prevent that <!DOCTYPE...> line from being generated? When I delete that DOCTYPE line, my web page runs properly after that. Any insight is greatly appreciated. Thanks!
Browsers will use the DOCTYPE definition to decide whether or not to interpret an HTML (or XHTML) document in Quirks mode. I assume that's what you mean by "messes up the proper display of the web page" - you're carefully creating valid HTML5 but the browser goes into Quirks mode and the page doesn't look right.
What you want is the standard HTML DOCTYPE definition.
<!DOCTYPE html>
Unfortunately for you, the HTML generation functions in CGI.pm are unmaintained and don't have support for HTML5. So you can't get the module to generate this DOCTYPE.
Honestly, your best approach is to stop using all of the HTML generation functions and switch to a template-based approach instead. But I can see how that would be a big job so, in the short term, perhaps you can just stop using start_html(). It shouldn't be too hard to replace the call with a heredoc that contains the text that you want.
Update: The comment from Quentin below got me thinking. When I said:
you're carefully creating valid HTML5 but the browser goes into Quirks mode and the page doesn't look right
I was completely wrong. If you get the browser behaviour you want without a DOCTYPE, then you want to put the browser into Quirks mode. And that's far easier. Using the information from the Wikipedia article I linked to above, you can see that HTML 4.01 Transitional is the most recent DOCTYPE that will put all modern browsers into Quirks mode. So you can use that DOCTYPE.
$ perl -MCGI=:html -E'say start_html(-dtd => "-//W3C//DTD HTML 4.01 Transitional//EN")'
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled Document</title>
</head>
<body>
And that should get the browsers working as you want them.
But relying on Quirks mode is fragile. I recommend that you consider fixing your HTML and CSS so that they work as you want when browsers are in Standards mode.
I'm using Fancybox to open an iframe and it works fine in all browsers except for ie.
When ie opens the iframe it seems to stagger for a split second and then it shifts the modal box to the right and down a few pixels.
I came across a few people's posts but their answers didn't help.
I also played around with the CSS with no success.
Anyone came across anything like this before?
Cheers!
Hope my solution will help to anyone who still face the same issue...
I use fancybox 1.x and my DOCTYPE is "html".
I've found that actually the issue was in using box-sizing: border-box; in styles reset. So I switched it back to content-box for #fancybox-content and #fancybox-wrap and fancybox started to work properly.
Fancybox needs a proper DOCTYPE to work correctly, specially with IE. Your site is currently running in quirks mode.
You can find a working DOCTYPE reference here.
by this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
In your particular case, you may try changing this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Fancybox needs a proper DOCTYPE to work correctly, specially with IE. Your site is currently running in quirks mode.
You can find a working DOCTYPE reference here.
In your particular case, you may try changing this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
by this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
UPDATE : I have created some simple html pages to reproduce the issue with IE.
The first one uses the same DOCTYPE as in your page as well as the same fancybox code. IE works in quirks mode so fancybox behaves oddly as in your page:
http://picssel.com/playground/jquery/ieWrongDoctype_09feb12.html
The second one uses the proposed DOCTYPE as solution. IE works in standards mode and fancybox works properly:
http://picssel.com/playground/jquery/ieGoodDoctype_09feb12.html
My conclusion: use the correct DOCTYPE
It seems sometime to work fine and sometimes not, so in should I use divs inside form or not?
and in general is there a guide for what HTML tags will not work inside other tags?
Divs do not cause any intrinsic problems inside forms. Any CSS rules or JS that might get applied to them may cause problems, but the same is true of any element.
The HTML 4.01 specification includes a guide on how to read DTDs. This is applicable for HTML 3.2 and 4.x as well as XHTML 1.x. HTML 5 does not have an official DTD, so you have to pay attention to the "Content model" for each element in the spec.