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.
Related
I have, what I think, is a strange problem.
I have been creating a webpage for my site that, whenever I refresh the page, prompts Microsoft Edge (but not Chrome or FireFox) to ask me if I would like to translate the page from Portuguese and sometimes French.
I have been going through the HTML to identify what is causing this issue and I have discovered the following block of code is causing the issue:
<p class="ltol__pub">
This website is a publication of the livingtheOKlife company.
</p>
You may at this point be thinking that the name "livingtheOKlife" is causing the issue. However, I have used this name on multiple webpages in the past and never had this problem before. Furthermore, if I use a different line for the paragraph:
<p class="ltol__pub">
This website was designed and created by the livingtheOKlife
company.
</p>
The issue is resolved.
It is not an problem if I have to use the second line instead of the first. I can sleep at night if that is to be the case. However, I would very much like to know if anyone knows what may be causing the translate prompt to appear?
... and before you say it, I have included <html lang="en"> in the document.
... and I'm also aware this could be a bug, but I cannot find any record of it anywhere.
Add translate="no" in the <html> tag of your page. Also add <meta> tag with name="google" and content="notranslate" in the <head>. This tag should also work on Edge.
<html lang="en" translate="no">
<head>
<meta name="google" content="notranslate">
</head>
...
</html>
Below meta tag syntax is accepted by the browser,
<meta http-equiv="refresh" content="3; redirect.html"/>
but, https://validator.w3.org could accept below syntax(only),
<meta http-equiv="refresh" content="3; url=redirect.html"/>
So,
1) Why browser accepts lose syntax of html?
2) For production code, what is the standard approach to validate html syntax?
There were bugs (or simply loose parsers) in browsers.
People wrote code that depended on those bugs.
Other browsers copied those bugs so that the code from the previous step would work.
Go to 1.
I´m tryng to run my webpage containing basics scripts <?php..?>,<script>...</script>, in LOCALHOST server, using Apache2triad.
It happens that script are running only to find <!DOCTYPE...> or without it in the IE console, the messages are sending like:
HTML1300:Navigation occured.
HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>".
I already try to use declaration, like:
<!DOCTYPE HTML>
<html>
<body>
<?php echo "Ok, running...."; ?>
or simply:
<html>
<body>
But the console error problem persist... Have you got some idea whats is happening with the server?
Thanks.
Your problem is IE compatibility (it has nothing to do with Apache):
How to use Compatibility View in Internet Explorer 9
You can try to add X-UA-Compatible meta tag:
(it also fixes some layout issues that occur in IE10):
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
A quote from Mozilla's Quirks Mode:
The DOCTYPE shown in the example, , is the simplest
possible, and the one recommended by HTML5. Earlier versions of the
HTML standard recommended other variants, but all existing browsers
today will use full standards mode for this DOCTYPE, even the dated
Internet Explorer 6. There are no valid reasons to use a more
complicated DOCTYPE. If you do use another DOCTYPE, you may risk
choosing one, which triggers almost standards mode or quirks mode.
How do you see which mode is used?
In Internet Explorer, press F12, and look for Document Mode.
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>
I am building a webpage, and I found a problem which I cannot solve. If I declare the DOCTYPE, the page breaks completely, and if I don't declare it, the IE version won't work properly (the drop down menus won't drop). But, despite of it's broken, if I declare the DOCTYPE, the dropdown menus work at every explorer, including IE. So I really don't know what to do, any idea? I'm currently declaring the DOCTYPE as: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> but I've tried other options and they don't work neither.
Last time I posted here the free server blocked the page (probably too many users, as I'm the only one getting in currently), but these are 2 examples of the page:
with DOCTYPE: http://newfutureuniversity.org/project/
without DOCTYPE (dropdown menus not working with IE9):
http://newfutureuniversity.org/learn/
Any help would be appreciated. Even if it's just to orientate me about where to start searching, as I could't find anything similar.
Using or not using the doctype for modern web pages is no longer optional and is required. It is the very first thing that goes down on a page and never changes. If you created a page without one to begin with, then your whole page is set in quirks mode. Trying to fix it or change it by adding/removing the doctype is, essentially, changing the rules and the target as you go along.
Trying to use jQuery to fix this now is just sinking you into a deeper hole. Add the doctype, use a modern browser to get everything how you want it (IE is not a modern browser), then work on getting IE to follow along.
The charset you should be using is <meta charset="utf-8">
for HTML5 it is nice and small, you have an XHTML declaration
it can simply be:
<!DOCTYPE html>
for HTML 5
Using XHTML tells the parser to be much more strict in what it accepts. you have no <html> root in your document (HTML5 won't care about this).
content type specification is different in HTML5 as well
instead of <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> you can use <meta charset="iso-8859-1" /> if that is your desired character set.