The HTML5 doctype is not triggering standards mode in IE8

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

Question

i work for a company where all our sites currently use the XHTML 1.0 transitional doctype (yes i know it is very old school). I want to change them all to use the HTML5 doctype seeing as it is backwards compatible. One of the reasons why i want to make the switch is because in IE8 if someone has the developer tools installed then the old XHTML doctype switches the browser into compatibility mode and renders the page as IE7. From reading up on it i was led to believe that the HTML5 doctype will set any page to render in standards mode, but this is not happening when i test it on our staging server it still flips into IE7 rendering mode.

The weird thing is if i save the page with HTML5 doctype locally and open it, it is rendering in IE8 standards mode. There must be something else causing it to drop into compatibility IE7 rendering. Any ideas what this could be?

Below is the head of the test page i have been looking at:

    <!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

    <title>Burton - Mens Clothing - Mens Fashion - Burton Menswear</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="description" content="Burton is one of the UK's leading men's clothing &amp; fashion retailers, with a range of men's clothing designed to make you look &amp; feel good. Find formal &amp; casual clothes &amp; accessories for men online at Burton menswear"/>
    <meta name="keywords" content="menswear, clothes for men, clothing for men, men clothes, men's fashion, men's wear, men's clothing online, men's clothes online, men's clothes shop, burton men's, burton menswear, burton uk, burton"/>

    <script type="text/javascript">document.getElementsByTagName('html')[0].className = 'js';</script>

    <link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/screen.css" />
    <link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/print.css" media="print"/>

    <link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/brand.css" />

    <!--[if lt IE 8]>
    <link rel="stylesheet" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/ie.css" type="text/css" media="screen, projection">
    <![endif]-->

    <meta http-equiv="content-language" content="en-gb" />

    <link rel="shortcut icon" type="image/x-icon" href="http://eu.burton-menswear.com/favicon.ico" />
    <link rel="search" type="application/opensearchdescription+xml" title="burton.co.uk Search"  href="http://eu.burton-menswear.com/burton-search.xml"/>
    <!-- Start Summit Tag -->
    <script type="text/javascript"> 
  var __stormJs = "t1.stormiq.com/dcv4/jslib/3286_D92B7532_4A18_46A8_864A_5FDF1DF25844.js";
</script>
    <script type="text/javascript" src="http://eu.burton-menswear.com/javascript/track.js"></script>
    <!-- End Summit Tag -->
    <!-- Start QuBit Tag -->
    <script src=//d3c3cq33003psk.cloudfront.net/opentag-31935-42109.js async defer></script>
    <!-- End QuBit Tag -->
    <link type="text/css" rel="stylesheet" href="http://reviews.br.wcstage.arcadiagroup.ltd.uk/bvstaging/static/6028-en_gb/bazaarvoice.css" ></link>

</head>
Was it helpful?

Solution

There’s a couple of settings in IE 8 that can cause pages to render in Compatibility Mode, regardless of the page’s HTML content or HTTP headers:

  1. Page > Compatibility View Settings

    • If “Display intranet sites in Compatibility View” is checked, then IE will render all sites on the local network in compatibility view. (This has happened to me a few times during development.)

    • If “Include updated website lists from Microsoft” is checked, then IE will download a list of websites from Microsoft and render them all in compatibility view.

    • If “Display all websites in Compatibility View” is checked, then, well, you can guess what happens.

  2. Tools > Internet Options > Advanced > Browsing

    • If “Automatically recover from page layout errors with Compatibility View” is checked, then IE will sometimes switch to compatibility view if it thinks a page’s layout is broken.

  3. And, finally, if you navigate to a page and then click on Page > Compatibility View (or click on the compatibility view icon in the address bar), then that page will be rendered in compatibility view.

So, although it’s worth putting X-UA-Compatible in there and using a doctype like the HTML5 one (so that your intentions are clear), always check these settings first when testing.

OTHER TIPS

I'm not sure if this helps, but in IE9, you must use:

<!DOCTYPE html>

and the following meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=9">

After testing combinations of these two, here's what I found:

  • No Doctype or Meta Tag:
    Quirks Mode, IE Engine = 5

  • Doctype Only:
    Standards Mode, IE Engine = 7

  • Doctype and Meta Tag
    Standards Mode, IE Engine = 9

  • Meta Tag Only
    Standards Mode, IE Engine = 9

How to detemine mode type and engine:

  • document.compatMode: CSS1Compat = standards mode, otherwise you're in quirks mode

  • document.documentMode: returns which engine IE is using to render the document

Notes:

  • Usually Doctype must be the first line in your file. I'm not sure, but I think an XML tag can precede it. If anything else precedes it your likely to break your doctype declaration:
  • Meta Tag must be placed in <HEAD>
  • Your post is 25 days old, so I assume you have a solution. Even so, I'm not sure if these IE9 settings are appropriate for your problem. You'll have to examine window.document.compatMode and window.document.documentMode to determine if they are viable under IE8
  • Change meta tag to <meta http-equiv="X-UA-Compatible" content="IE=8">
  • Altough it is possible to use the meta tag only, I wouldn't recommend using it without a doctype. As this might cause problems with XML, CSS, and Script

I spent hours trying to figure this out and posting this article so I hope someone actually gets some use out of my research. May the source be with you...

Both the XHTML 1.0 Transitional doctype (when used by the spec, with a URL) and <!doctype html> trigger “Standards Mode” in IE. If this does not happen, there is a multitude of reasons that probably have nothing to do with the doctype change (and can only be analyzed if additional information, such as a URL, is available); see IE 8 and IE 9 complications in Activating Browser Modes with Doctype.

Changing to <!doctype html> is pointless and a potential problem, unless you not actually changing the markup. In validation, which is the other reason for using doctype, it causes a completely different analysis and quite often error messages about constructs that are valid in XHTML 1.0.

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