Fix Common IE Problems: Update your Docmode for Web Standards

Rey Bango 5 Comments

Document compatibility defines how a browser renders your website. The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by explicitly declaring the HTML5 document type:

[code lang=”html”]<!DOCTYPE html>[/code]

This markup triggers standards mode in Internet Explorer 9 and 10. And it also works well in Chrome and Firefox. Four steps will get your site ready for many browsers and devices:

Step 1: Validate that your site uses standards mode

Check whether or not your site is currently in standards mode:

  1. Open the website in Internet Explorer 10.
    • Note: You can also follow the same steps to update the docmode for IE9 only without downloading the preview.
  2. Press F12 to launch the IE Developer Tools or find it on the Tools menu as shown below:

    • Note: If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the following tutorial.
  3. Check if your site indicates Browser Mode: IE10 and Document Mode: IE10 standards as shown in the toolbar below:

    Click to Enlarge
  4. If your site is in Browser Mode: IE10 and Document Mode: IE10 Standards, you’re done! Note if the Browser Mode and Document Mode of your site are different than above. A common example is Browser Mode = IE8 and Document Mode = Quirks which indicates that your website was designed for older versions of IE and may not be ready for web standards.

    Click to Enlarge

Step 2: Implement docmode for web standards

Force IE10 standards mode to test your website:

  1. Insert [code lang=”html”]<!DOCTYPE html>[/code] into your website’s HTML page
    • Learn more about how to update your doctypes here
  2. Reload your page in the browser and check the Browser Mode and Document Mode again using the F12 Developer Tools. If Browser Mode: IE10 and Document Mode: IE10 standards are not shown, continue below.

Step 3: Determine why your site is not in Standards Mode

Most problems are related to supporting older versions of IE. Start by ensuring your standards-based code is rendered in IE9 and 10. Then keep your non-standards-based code for older versions of IE.

  1. My page is not in Browser Mode: IE10
    • Possible Cause: Your website may flagged in Compatibility View and forced into an older browser mode to ensure the site functions
      • Resolution: Check if your site is on the list here. Learn more about the Compatibility View list and request removal here.
  2. My page is not in Document Mode = IE10
    • Possible Cause: Your website’s doctype is invalid or missing
      • Resolution: Check for a valid, well-formed doctype like:
        [code lang=”html”]<!DOCTYPE html>
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/code]
        Learn more about how to update your doctypes here.
      • Possible Cause: Docmode being forced via X-UA-Compatible meta tag
        • Resolution: Check for code similar to this in the of the page.
          [code lang=”html”]<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
          <meta http-equiv="X-UA-Compatible" content="IE=8" >[/code]

          Remove it and reload your page. Continue testing. Learn more about Specifying Document Compatibility Modes here.

Step 4: Resolve common IE problems when updating docmode

Most problems are related to supporting older versions of IE. Start by ensuring your standards-based code is rendered in IE9 and 10. Then keep your non-standards-based code for older versions of IE.

  • Possible Cause: Conditional comments support browser version-specific features
    • Resolution: Check for conditional comments that run non-standard code. These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully. Check for code similar to this:
      [code lang=”html”]<!–[if IE 8]>

      <p>Welcome to Internet Explorer 8.</p>

      <![endif]–>
      [/code]
      Remove it and reload your page. Continue testing. Learn more about Conditional Comments here.

  • Possible Cause: User agent sniffing supports browser version-specific features
    • Resolution: Check for user agent sniffing. These are often used to specifically target a browser based on the user agent string presented via the browser mode. Check for code similar to this:
      [code lang=”js”]if (version = /MSIE (\d+\.\d+)/.exec(navigator.userAgent)) {

      isIE = true;

      browserVersion = parseFloat(version[1]);
      }[/code]
      Start by implementing feature detection where possible with web standards. Learn more about User-Agent Strings here. The IE10 User-Agent String is located here.

Other reasons my page does not render correctly:

  • Possible Cause: Your website may be using browser specific features that are no longer supported. Use web standards whenever possible.
  • Possible Cause: Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.
    • Resolution: Learn how to create plug-in free experiences. A complete step-by-step guide will be available shortly.
  • Possible Cause: Your website may be loading browser version-specific CSS files:
    • Resolution: Ensure layout is avoiding CSS hacks where possible. Learn more about investigating CSS issues here.

A list of common problems is available in the IE Compatibility Cookbook.

If you’re unable to update your docmode with these resolution steps, tweet us @IE or check the Forums on MSDN.

For further detail, try these articles:

Rey Bango

More Posts

5 Comments

  1. Is there an easy way to tell if IE8 happens to have been set to compatibility mode by the user (do to prior problems, or accidental clicking) via JavaScript or serverside? I’d like to place a message on the page that the browser needs to NOT be set to compatibility mode because it creates layout problems.

    • Hi Benjamin. You should be able to use the documentMode property of the document to determine the mode. Checking for document.documentMode will return a numeric value telling you which docmode the page is in. I tested it by going to a site that rendered in IE9 standards mode, switching the Document Mode via F12 Developer Tools, and checking the documentMode using the dev tool Console. It worked perfectly.

      Hope that helps.

      • The trouble is that only gives you a number, not if the compatibility is set. if the number is 7 and the browser is 8, then you might be in IE8 compatibility mode, but you might also have it set to be IE7. So it doesn’t tell me that the user set the browser in compatibility mode. If it is set to IE7 (or 8,9, etc.), then the page works, but if it is in IE8 compat, then it doesn’t.

      • I have the same problem.
        My docmode and meta tags are completely IGNORED by IE8 because of the “display all intranet sites in compatibility mode” setting which happens to be active by default on ALL company PCs!

        It’s a really big problem to tell everyone they need to turn it off!

  2. XHTML 1.0 Transitional DOCTYPE is INVALID in IE10, even if you write it correctly. You will receive this error in Console in IE Developer tools:
    HTML1524: Invalid DOCTYPE. The shortest valid doctype is “”.

Comments are closed.