IE renders my page in Quirks mode

StackOverflow https://stackoverflow.com/questions/18517290

Question

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.

Was it helpful?

Solution

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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top