Internet Explorer 8 Rendering Modes

Author: Chris Leeds, Microsoft MVP
Web Site: http://ExpressionWebStepByStep.com

Expression Newsletter, subscribe now to get yours.

The latest release of Internet Explorer (Internet Explorer 8) contains a number of interesting additions that should be of particular interest to the web designer.

• Web Slices
• Accelerators
• Developer Tools
• Rendering Mode Meta Tags
• Rendering Mode Control
• Adding Meta Tags to Code Snippets

Web Slices

The Web Slice enables users to subscribe to frequently changing parts of web pages by adding that “Slice of the Web” to their favorites bar. This high level of user interaction is available to the developer through simple HTML elements.

Accelerators

Accelerators enable users to highlight text in a web page, click the Accelerator button that appears, and then instantly chose one of several tasks for the highlighted text. While not as easy to do as the Web Slice, designers can make custom Accelerators without much trouble.

Developer Tools

Previously known as the Internet Explorer Developer Toolbar and available as a separate download from Microsoft, these tools, now greatly improved, are included by default with Internet Explorer 8; Just press F12 to get started.

Rendering Mode Meta Tags

The designer can easily control what browser version a page will render in with simple meta tags. This gives the designer easy access to exactly how Internet Explorer will render the page.

This article is the first of a series intended to address each of these topics from an Expression Web user’s perspective. Since the need to remedy display issues in a new browser quickly is always the most pressing task, you will first learn how to use meta tags to easily control the rendering mode of any page.

Rendering Mode Control

If you’ve been making websites for a while, you’ll remember at least one browser transition where you needed to address issues with the way your past work appeared in the newest browser. It’s just the reality of being a web designer: old work needs to be tested and new work needs to be adjusted every time there’s a new release of a major browser.

Those who are new to web design have lucked out because Internet explorer 8 allows the designer to specify the rendering mode of pages on an individual basis. Leveraging this provides you with an easy way to instantly “fix” pages, and when permanent solutions are developed, you can easily specify that the page displays in the most recent Internet Explorer rendering mode regardless what that version is.

All of this magic happens with a simple little meta tag:

<meta http-equiv="X-UA-Compatible" content="|" />

(Where | represents one of the modes below)

• IE=5
  • <meta http-equiv="X-UA-Compatible" content="IE=5" />
  • This forces IE 8 to render the page in “Quirks” mode.
• IE=7
  • <meta http-equiv="X-UA-Compatible" content="IE=7" />
  • This forces IE 8 to render the page using IE 7 Strict mode.
• IE=EmulateIE7
  • <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  • This forces IE 8 to use the !DOCTYPE declaration in the page to determine the rendering mode.
• IE=8
  • <meta http-equiv="X-UA-Compatible" content="IE=8" />
  • This forces IE 8 to display the page in Internet Explorer Standards mode.
• IE=EmulateIE8
  • <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
  • This forces IE 8 to use the !DOCTYPE declaration in the page to determine the rendering mode.
• IE=edge
  • <meta http-equiv="X-UA-Compatible" content="edge" />
  • This forces Internet Explorer 8 to render in the most recent mode. For instance; currently this would behave like using a value of IE=8, but when IE 9 is available that will be the mode that IE=edge will render in.

Obviously, if you’re the designer of a site and you get a call letting you know that it doesn’t “look right” in Internet Explorer 8, you’ll most likely want to insert the IE 7 rendering meta tag until you can diagnose the rendering issue on your local computer and then publish your changes to the server.

Given that this document is designed to assist the Expression Web user, the following instructions will help you utilize these Meta tags from the Code Snippet Library in any Version of Expression Web.

Adding the Meta Tags to Your Code Snippet Library

1. Open Expression Web 2 and click Tools on the Common toolbar. Click Page Editor Options to open the Page Editor Options dialog, and then click the Code Snippets tab.

   

2. Click the Add button to open the Add Code Snippet dialog, type RenderMode in the Keyword field and type IE 8 Render Meta Tag in the Description field, and then type:
   <meta http-equiv="X-UA-Compatible" content="|" />
   into the text field.

   

3. Press OK on the Add Code Snippet Dialog and OK on the Page Editor Options dialog.
4. To test your new Code Snippet open a new page and set your insertion point in the <head> section of the page.
5. Press Ctrl+Enter on your keyboard to open the Code Snippet Library and begin to type RenderMode, to select the Snippet you just added.

   

6. When the Snippet is highlighted, press Enter on your keyboard to insert the snippet. Notice that your insertion point is where the pipe character was in your snippet.
7. Simply type the render mode you want and save your change.

   

Using the Code Snippet Library, you could create a Snippet for each of the possible rendering modes, but in all likelihood you’ll probably only use IE=7 to immediately suppress a rendering issue in Internet Explorer 8, or IE=edge to force the latest rendering mode.

Chris Leeds is a long-time Microsoft MVP and the author of two Microsoft Press books about Expression Web ( http://ExpressionWebStepByStep.com). Besides writing about and using Expression Web, Chris is also the inventor of ContentSeed ( http://ContentSeed.com) a very simple Content Management System that enables end users to be able to edit content on their web site with nothing more than a browser.