Why Firefox says this page is in Quirk mode and it is not? - doctype

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

Related

How to prevent Perl CGI->start_html() from printing DOCTYPE header

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.

TinyMCE editor is not loading because document is not in standards mode - how can I get my document in standards mode?

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.

GWT IE9 emulate IE8

So I have a GWT application that works perfectly in IE6-8, and most all modern browsers. Unfortunately, due to a known bug in how IE9 handles onchange events on <select> elements, it's pretty much unusable in IE9.
So instead of having our clients downgrade to IE8, I had the brilliant idea of having IE9 emulate IE8. I put this meta tag in my GWT host page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
When I look at the IE9 Developer Tools (F12), I see that it's "Browser mode" is IE9 and "Document mode" is IE8 standards. The GWT app doesn't load, though: it gives me a JavaScript error in one of the compressed and obfuscated JavaScript functions generated by GWT. I don't have the ability to debug into the app via IE so I can't figure out what's going on that way.
I suspect it has something to do with the way GWT detects which browser is being used and loads the appropriate resources for the session.
Edited to add: When I try to use IE=8 instead of IE=EmulateIE8, Developer Tools still reports a IE9/IE9 standards mode and all of the same onchange event issues are present as when I run in vanilla IE9.
Is there a working way to make IE9 emulate IE8 Standards mode in the way the http-equiv meta tag does, that works with GWT 2.4?
I've had similar problem: IE ignored <meta http-equiv="X-UA-Compatible" content="IE=9"> tag (I was trying to prevent IE8 from displaying the page in IE7 compat mode). It was caused by not having X-UA-Compatible meta as the first child of <head>. I set it as the first child of <head> and added <!DOCTYPE HTML> on top of everything, and it worked.

Fancybox OK with Firefox but zero with IE8 (code attached)

I am a new user to fancybox 2.0 and have to been able to get it to work. After a couple of days trying, I eventually stripped down test page do the bare bones. It works with Firefox but not with IE8.
Please, can someone look at this code and see where I am going wrong.
http://www.bytebrothers.com/bb_tester/Video_lightbox_test.htm
Your document has not DOCTYPE so IE switches to quirks mode.
Fancybox needs standards mode to run properly so set a valid DOCTYPE. You can check http://www.alistapart.com/articles/doctype/ or simply set <!DOCTYPE html>

Use of HTML 5 doctype creates a gap at top of page on iphone safari browser

Update: Please disregard, my problem was caused by an advertisement bar being inserted by the vendor who provides my workplace wireless service.
I was building a mobile friendly website and wanted to use HTML 5. However when I specify the doctype as <!DOCTYPE HTML> , I get a gap at the top of the page on safari on the iphone.
I notice that other sites have the same problem such as nextstop.com and nike.com
I guess safari does not fully support HTML 5 yet. Anybody know of a workaround?
HTML 5 is still in a very unstable state. Don't use it in a production environment.
Edit Just so you guys know what it's about, HTML 5 is currently an Editor's Draft, and the document clearly states (in the Status of This Document section) that this specification is not stable, and that a consensus may not have been reached on any of the proposed sections. I think it should be clear enough that it means it's a bit early to start using it.
All browsers correctly interpret the HTML doctype. Putting it in sets your browser into Standards Compliant mode, that is the only difference with or without the doctype.
You can use a CSS reset tool like http://meyerweb.com/eric/tools/css/reset/ to get rid of default margins and padding on all elements.