I'm working on a WordPress site and even when I delcare html5 as the docmode, the site still forces to open in quirks in IE9 and 8. The url is: http://teknikor.bethmotta.com
my header.php contains the following code:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Any ideas on why this is still opening in Quirks? Thanks for any help!
I just viewed the site and you've got about 38 lines of HTML above your doctype, which looks to be related to Google Analytics. IE's going to want the doctype to be the first line of source, I believe.
Related
I've spent the past few hours trying to fix several issues and confusing myself.
When the site is viewed in IE8 it appears to go into quirks mode, I say appears as I don't have access to that machine, only a screen print but to replicate the mess I had to select Quirks form Dev tools.
The site is a fairly complicated one. At the top of each page a php init file is called and so on.
The index currently looks something like:
<?php require'core/init.php';?>
<?php include_once 'include/IE8Etc.php';?>
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
The IE8Etc and IE=Edge are recent additions. I then read that IE will enter this mode if the doctype is not the first thing it sees and that comments can cause problems.
Does this apply to the php I have before it? Should my doctype declaration stay where it is or should it be moved to the top of the init page. Even as I write it it sounds like a ridiculous question and I'm sure it's fine where it is but I need to make certain.
Thanks.
The point you mentioned in the question about the doctype needing to be the first thing in the page applies to the page as it is seen by the browser.
The content of the PHP code is entirely irrelevant, if it doesn't generate any output.
However, if the PHP is generating output -- even if that output is nothing more than a blank line -- then it will be making the doctype invalid.
So the first thing you should do is open the page in your browser, and select the 'view source' option. look at the actual HTML that the browser receives. If there's anything before the doctype, then it needs to be moved or removed.
Once you've done that, the second thing to do is run your page through the W3C Validator. This will tell you about any other HTML errors you might have on your page. You have at least one, as the <meta> tag needs to be inside the <head> tag, but there may be other errors too. It is possible for some HTML errors to throw the browser into quirks mode, so you should fix anything that is reported by the validator (although the doctype issue is by far the most common cause).
Hop that helps.
The Problem
The linebreaks after both of the <?php ?> snippets are counting as characters. If Internet Explorer detects characters (even whitespace) before the doctype declaration, it enters quirks mode. As EricLaw correctly states, you should also consider moving all your meta tags into the head section, and consolidating your php code.
The Solution
The correct code would look like this:
<?php
require'core/init.php';
include_once 'include/IE8Etc.php';
?><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Title</title>
The whitespace in front of the DOCTYPE may come from the BOM (byte-order mark) at the beginning of files saved in UTF-8 encoding with BOM. After removing the BOM (save as ANSI as UTF-8 in Notepad++), the DOCTYPE was correct, but it still went to Quirks mode until the meta tag/header for IE-Edge was added.
I'm attempting to embed a "new" style page inside of an older page via iframe, but in IE9, things like border-radius are still having no effect when the page is loaded inside the iframe. When the page is loaded on its own, the rounded corners and effects appear just fine, but when inside the iframe, the css properties seem to be ignored.
Initially I thought this was DOCTYPE inheritance issues, but they're both <!DOCTYPE html> (outer and inner page). Next, I belive it's the content="IE=Emulate8" that's being inherited by the inner iframe. This is, of course, a theory. If it's an incorrect theory, please let me know. :)
Anyway, here's an example of the page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="IE=EmulateIE8" http-equiv="X-UA-Compatible">
</head>
<body>
... stuff...
<iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
</html>
</iframe>
</body>
</html>
Some of this may not really be relevant. Anyway, my question is: if the EmulateIE8 is the culprit as to why css properties like border-radius aren't working in the iframe under IE9, is it possible to override it or disable it inside the inner iframe?
Just to note: changing what's outside the iframe is difficult without changing the entire framework of the application, unfortunately (legacy apps *sigh*). I'm attempting to put something a little more modern inside of the legacy application.
As noted here:
As of IE9 mode, webpages cannot display multiple document modes. For example, consider a standards-based webpage that contains a frame element that displays content in quirks mode. IE9 mode displays the child frame in standards mode (because the parent document is in standards mode). Starting with Internet Explorer 10, however, child frames can emulate quirks mode. For more info, see IEBlog: HTML5 Quirks mode in IE10. For best results, however, use document modes consistently.
How can I force Internet Explorer 9 to use standards document mode? I built a website and I'm finding that IE9 uses quirks mode to render the website pages. But I want to use standards mode for rendering.
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
This makes each version of IE use its standard mode, so IE 9 will use IE 9 standards mode. (If instead you wanted newer versions of IE to also specifically use IE 9 standards mode, you would replace Edge by 9. But it is difficult to see why you would want that.)
For explanations, see http://hsivonen.iki.fi/doctype/#ie8 (it looks rather messy, but that’s because IE is messy in its behaviors).
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
The meta tag must be the first tag after the head tag or it will not work.
There is something very important about this thread that has been touched on but not fully explained. The HTML approach (adding a meta tag in the head) only works consistently on raw HTML or very basic server pages. My site is a very complex server-driven site with master pages, themeing and a lot of third party controls, etc. What I found was that some of these controls were programmatically adding their own tags to the final HTML which were being pushed to the browser at the beginning of the head tag. This effectively rendered the HTML meta tags useless.
Well, if you can't beat them, join them. The only solution that worked for me is to do exactly the same thing in the pre-render event of my master pages as such:
Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
Dim MetaTag As HtmlMeta = New HtmlMeta()
MetaTag.Attributes("http-equiv") = "Content-Type"
MetaTag.Attributes("content") = "text/html; charset=utf-8;"
Page.Header.Controls.AddAt(0, MetaTag)
MetaTag = New HtmlMeta()
MetaTag.Attributes("http-equiv") = "X-UA-Compatible"
MetaTag.Attributes("content") = "IE=9,chrome=1"
Page.Header.Controls.AddAt(0, MetaTag)
End Sub
This is VB.NET but the same approach would work for any server-side technology. As long as you make sure it's the last thing that gets done right before the page is rendered.
put a doctype as the first line of your html document
<!DOCTYPE html>
you can find detailed explanation about internet explorer document compatibility here: Defining Document Compatibility
To prevent quirks mode, define a 'doctype' like :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
To make IE render the page in IE9 document mode :
<meta http-equiv="x-ua-compatible" content="IE=9">
Please note that "IE=edge" will make IE render the page with the most recent document mode, rather than IE9 document mode.
Make sure you take into account that adding this tag,
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
may only allow compatibility with the latest versions. It all depends on your libraries
I tried with an alternate method:
Hit F12 key
Then, at right hand side in the drop down menu, select internet explorer version 9.
That's it and it worked for me.
Make sure you use the right doctype.
eg.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or just
<!doctype html>
and also read and understand how compatibility modes and developer toolbar for IE work and set modes for IE:
I have faced issue like my main page index.jsp contains the below line but eventhough rendering was not proper in IE. Found the issue and I have added the code in all the files which I included in index.jsp. Hurray! it worked.
So You need to add below code in all the files which you include into the page otherwise it wont work.
<!doctype html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
Using the google webfont loader the font shows in IE9, but when I declare at DOCtype at the start
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
also
!DOCTYPE html
breaks it
the font no longer loads. Leaving it out breaks the auto margins.
Nothing so far as worked.
<!DOCTYPE HTML> is all I ever use anymore. It loads the fonts just fine for me.
Should it fail, add this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
And should that also fail, check the F12 Developer Tools console for error messages.
A web application we have for an organisation that is officially upgrading its standard browser from IE6 to IE8 (queue celebrations), we've set all our DOCTYPEs to be <!DOCTYPE html> (as well as fixed other html code) and I thought that in IE8 this would cause the page to be rendered in IE8 Standards Mode. However, it is still shown in IE7 Standards mode.
I've added the <meta http-equiv="X-UA-Compatible" content="IE=8"> into the <head> section and it still fails to default to IE8 Standards mode. I'm presuming at this stage that there must be a setting (perhaps Group Policy etc) that is forcing the mode.
After reading a hack on an MSDN forum that if you put the meta tag before the <html> tag, it correctly displays as IE8 Standards mode, and this worked for me. Is there another way to do this? It just looks terrible seeing the meta tag there...
Here's roughly how each page is made up:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
</body>
</html>
You could set X-UA-Compatible as a HTTP response header, instead of as a meta tag.
This is a much cleaner solution than placing it above the <html> tag.
A confusing useful blog post concerning X-UA-Compatible and its many intricacies:
http://farukat.es/journal/2009/05/245-ie8-and-the-x-ua-compatible-situation
Two possibilities:
The meta tag definitely belongs into the <head> section of the document.
If this is in an Intranet, this may be IE's "Smart default" kicking in. Yes, there is such a thing as smart defaults. See here. Because if you're in an Intranet, IE8 will automatically go into IE7 compatibility mode so as not to break the many corporate apps that rely on IE7. Makes sense, right? Right?