Attaining IE8 Site Compatibility - Short Reference

Ok, once again some information regarding the new IE8. This product is occupying me quite a bit however I think it is important to tell the story about better W3C standards compliance and new compelling and easy to develop extensibility and what that means to users and site owners. Especially standards compliance unfortunately is something that may introduce the need to act for many site owners. What that means is that IE8 by default renders in the most standards compliant mode it supports however this may break the experience of existing sites if the site owner doesn't take actions since the markup and style information sent to browsers identified as Internet Explorer is not standards compliant or is optimized for older browsers. Luckily there is remedy for this issues and some of them are quite simple and can be implemented with a minimum of effort. Since those possibilities are already comprehensively documented on Microsoft websites I don't want to dig into the details of every aspect about how to attain site compatibility. But since I found that the resources are scattered across many different pages I want to summarize the possibilities and list them in a short, clear and easy to follow way in this blog post. There are two categories of changes that you can bring in in order to have your site rendered correctly. One is to tell Internet Explorer 8 to use a backwards compatibility mode to render the page or to alter the page markup and styles to reflect the latest W3C standards supported by IE8. So what is necessary to do so? Here are the compressed instructions.

  1. Tell Internet Explorer explicitly which document mode to use

    1. To do that you can place a meta-tag into the <head>-Section of your pages or page templates. The tag has the following name and format:

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

      The content attribute of the tag accepts the values IE=5, IE=EmulateIE7, IE=IE7, IE=8, IE=Edge (or anything else however this could lead to unexpected behaviors ;)). The values, except for the "Edge" mode are probably self explaining however if you want more information there is a good explanation about those modes on the MSDN page already mentioned.

    2. You can instruct your webserver to add a custom header to the http-response when your pages are sent to the browser which has the advantage that you don't have to alter all your pages or templates but you are still able to control the rendering behavior in a very granular way since the header can be applied on an per application basis or for pages only that match a certain pattern.

      1. For IIS such a header can be applied by inserting a <customHeaders> section into the web.config file for the application like outlined in the sample below.

        <?xml version="1.0" encoding="utf-8"?>





                    <clear />

                    <add name="X-UA-Compatible" value="IE=EmulateIE7" />





      2. For an Apache 2.x webserver you need to add a Header directive to the httpd.config after enabling the headers module by uncommenting the LoadModule directive for the module . So the LoadModule and the Header directive looks like outlined below.

        LoadModule headers_module modules/
        Header set X-UA-Compatible IE=7

      If the you configure your webserver to set such a header and a page also includes a meta-tag already like described in 1.2.1 the tag in the markup takes precedence over the header set by the server.

  2. Deliver W3C standards compliant web documents

    1. Update your pages to reflect the latest W3C standards supported by Internet Explorer 8. The changes which were implemented in order to attain standards compliance are documented on MSDN.

    2. Since option 2.1 means quite some implementation and testing effort there might be already a solution that reduces, at least the implementation efforts for quite a bit and that is to use a site version that may probably be already available, e.g. the pages that you send out to other standards compliant browsers like Firefox. So the solution is to use the user-agent string to identify Internet Explorer 8 and to send back the pages also used for other browsers. The technique to evaluate the user-agent string to identify certain browser versions is already commonly known and used however for those of you who want to have in depth information about that can consult the documentation about user-agents, the detection of browser versions and how to evaluate them using regular expressions. The relevant part of the IE8 user-agent string however looks like this:

      Mozilla/4.0 (compatible; MSIE 8.0…

    But remember that Internet Explorer still is the released IE version with a significant market share and it will probably be around for another couple of years. So it would be not wise to follow a IE8 strategy only but keep a IE7 version as well. How strategies for versioning in conjunction with browser detection and conditional comments can be set up is briefly outlined in this whitepaper.

Of folks, I hope that this condensed reference is of some help to you and finally I will leave you with the call to action

To get compliant today to guarantee a seamless experience when users come to your site with IE8!