Viewing Thread:
"How to make use of Internet Explorer 8’s many compatibility modes!"

[B][U]How to make use of Internet Explorer 8�s many compatibility modes![/U][/B]

What would you like to do today? You could make yourself a little home media streaming entertainment centre, or add a pop-up window that Garin won’t like - but, what about your web site?? It might, just MIGHT, be in trouble, and in need your help, FAST!!!

With the release of Internet Explorer 8 a couple of weeks ago, and with Windows 7 edging ever closer, web site owners may start to notice your web site(s) looking quite different from what you expected, or have seen previously.

This could be for any number of reasons, but a very likely cause is that you’ve put your web site together with Internet Explorer in mind, either using it exclusively to check your site, or catered to old IE bugs in a manor that hasn’t been hidden from Internet Explorer 8.

Internet Explorer 8 has had a major overhaul of its Cascading Style Sheets (or just CSS) systems, being rebuilt in the dungeons of Microsoft HQ in Seattle over the past few months, with the aim of having Internet Explorer 8 follow “web standards” more closely, bring it in line and up to date with other browser technologies.

But the downside to this is that because Internet Explorer has remained somewhat dormant in it’s updates for so long, and is still so widely used around the world, people aren’t fully aware of how there site is or isn’t working as they thought, and they are left bewildered, and stuck with a live web site that now, BAM, isn’t working for some people.

Microsoft have often held on to the concept of “backwards compatibility”, some say this is good, some disagree, but it’s still there in IE 8, just a little more complex to work out.

If your web site looks fine in other browsers and older IE versions, but IE 8 is looking rather, funky, you may want to invoke the compatibility mode within IE 8 for the time being, to get your site working in IE 8 while you allow yourself time to figure things out.

What is X-UA-Compatible, and how do I use it?

The compatibly mode in IE is both automatically and manually invoked, but if the automatic detection doesn’t catch your site, you’ll need to manually enable that mode on your site, and this is done using the “X-UA-Compatible” setting, which is a setting within IE 8 that tells it which mode to use.

Which modes are in IE 8?

There seems to be 7 modes overall, and these are

- IE Edge mode (most standards compliant mode available) [B]edge[/B]
- IE 8 mode (standards mode or quirks mode, default setting)
[B]EmulateIE8[/B]
- IE 7 standards mode [B]7[/B]
- IE 7 mode (standards mode or quirks mode) [B]EmulateIE7[/B]
- IE 5 mode (which is, oddly, actually IE 7 quirks mode) [B]5[/B]

IE 8 mode is the default, so if your web site is standards compliant, then you shouldn’t need to mess around with all this [B]X-UA-Compatible[/B] stuff - lucky you.

The coloured text above at the end of each mode is the “trigger value” for each of the modes, and if you need to make use of compatibility mode, you will most likely want to pick [B]EmulateIE7[/B], or if you haven’t updated your site for IE 7 either, then the value of [B]5[/B] should do it.

It is important to note the difference between “IE 7 standards mode” ([B]7[/B]) and “IE7 mode” ([B]EmulateIE7[/B]).

“IE 7 standards mode” ([B]7[/B]) will use the standards mode of IE 7, regardless of weather or not a <!DOCTYPE> is included. “IE7 mode” ([B]EmulateIE7[/B]) will pick either the standards mode or quirks mode of IE 7, depending on the <!DOCTYPE> included. This is because IE 7 used this to let web site owners pick which mode they wanted to use for IE 7.

IE 8 mode works in the same way, except using IE 8 standards mode in place of IE 7 standards mode (confusing, isn’t it, don’t you hate the Internet).

If a web site is very large (such as from a business), and different departments run different sections, it isn’t uncommon to see some pages in standards mode, and others in quirks. Because of this issue, IE7 mode was added to work around this issue.

Setting the mode!

The value will be placed within the [B]X-UA-Compatible[/B], which only Internet Explorer 8 can currently read and do anything with, and there are a number of ways in which you can apply the setting – that number being, 2, really.

HTML

The first is using HTML, via the [B]<meta>[/B] element, which must appear between the opening <head> and closing </head> elements in each web page that you desire compatibility mode to be applied to. For example, if you wanted to force IE 8 to use IE 7 mode, you would add the one line:

<meta http-equiv="[B]X-UA-Compatible[/B]" content="[B]IE=[U]EmulateIE7[/U][/B]">

… to every web page on your site that needs to be in IE 7 mode. If you wish to use a different mode, then simply use the desired value within the content attribute, ensuring it begins with IE=, followed by the required value. For example, to use quirks mode, set the value to 5:

<meta http-equiv="[B]X-UA-Compatible[/B]" content="[B]IE=[U]5[/U][/B]">

HTTP

The other option is to use an HTTP header, which is a somewhat hidden setting that web browsers and web servers use to talk to one another.

In most cases, the majority of site owners would use the HTML version, unless they knew how to use HTTP Headers.

Using PHP to add an HTTP header

If you’re using PHP to power your web site, then you could slip in an HTTP Header snippet in to your code. To do this, you must ensure that it is placed before any output, such as using the echo or print commands.

A single line of code is needed, and looks something like this:

<?php
header("X-UA-Compatible: [B]IE=EmulateIE7[/B]");
?>

Using PHP to add an HTML element

If you’d rather use an HTML element to trigger compatibility mode, you can still use PHP to output this, with the code being placed in a position in the page than ensures the HTML element is placed in-between the opening <head> and closing </head> elements.

<?php echo '<meta http-equiv="[B]X-UA-Compatible[/B]" content="[B]IE=EmulateIE7[/B]">'; ?>

Using .htaccess to add an HTTP header

If you’ve never used .htaccess before, I would suggest not using this method on a live web site, unless you’re prepared that it may go wrong, and cause your web site to come offline for a while until you undo your changes.

If you have an .htaccess file, then you may feel this is the easiest way to add the setting, and again, this is a single line of code added to your .htaccess file, which looks like this:

Header set X-UA-Compatible "[B]IE=EmulateIE7[/B]"

Take it from here!

This is a method that should enable older web sites or web site owners who aren’t sure what all this standards stuff is about a little time to learn more about it, and find out what there web site might be missing. I would recommend this as only a temporary fix for Internet Explorer 8, and encourage web site owners to update their web pages to be more standards compliant, it is the way things are going on a much bigger scale nowadays, and will be beneficial to you later on in your web sites life and usage.

But, there is no need to panic. If you’re unable to make use of this feature, IE also includes the functionality for the user to manually use compatibility mode if your site now looks a little different than before, and can save this setting. However, as this is a new feature, and not all users are aware of it, if your web site looks odd in IE 8, but fine in IE 7, I would make use of the manual compatibility mode option for the time being, until you can update your web site.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

[B][U]How to make use of Internet Explorer 8�s many compatibility modes![/U][/B]

What would you like to do today? You could make yourself a little home media streaming entertainment centre, or add a pop-up window that Garin won’t like - but, what about your web site?? It might, just MIGHT, be in trouble, and in need your help, FAST!!!

With the release of Internet Explorer 8 a couple of weeks ago, and with Windows 7 edging ever closer, web site owners may start to notice your web site(s) looking quite different from what you expected, or have seen previously.

This could be for any number of reasons, but a very likely cause is that you’ve put your web site together with Internet Explorer in mind, either using it exclusively to check your site, or catered to old IE bugs in a manor that hasn’t been hidden from Internet Explorer 8.

Internet Explorer 8 has had a major overhaul of its Cascading Style Sheets (or just CSS) systems, being rebuilt in the dungeons of Microsoft HQ in Seattle over the past few months, with the aim of having Internet Explorer 8 follow “web standards” more closely, bring it in line and up to date with other browser technologies.

But the downside to this is that because Internet Explorer has remained somewhat dormant in it’s updates for so long, and is still so widely used around the world, people aren’t fully aware of how there site is or isn’t working as they thought, and they are left bewildered, and stuck with a live web site that now, BAM, isn’t working for some people.

Microsoft have often held on to the concept of “backwards compatibility”, some say this is good, some disagree, but it’s still there in IE 8, just a little more complex to work out.

If your web site looks fine in other browsers and older IE versions, but IE 8 is looking rather, funky, you may want to invoke the compatibility mode within IE 8 for the time being, to get your site working in IE 8 while you allow yourself time to figure things out.

What is X-UA-Compatible, and how do I use it?

The compatibly mode in IE is both automatically and manually invoked, but if the automatic detection doesn’t catch your site, you’ll need to manually enable that mode on your site, and this is done using the “X-UA-Compatible” setting, which is a setting within IE 8 that tells it which mode to use.

Which modes are in IE 8?

There seems to be 7 modes overall, and these are

- IE Edge mode (most standards compliant mode available) [B]edge[/B]
- IE 8 mode (standards mode or quirks mode, default setting)
[B]EmulateIE8[/B]
- IE 7 standards mode [B]7[/B]
- IE 7 mode (standards mode or quirks mode) [B]EmulateIE7[/B]
- IE 5 mode (which is, oddly, actually IE 7 quirks mode) [B]5[/B]

IE 8 mode is the default, so if your web site is standards compliant, then you shouldn’t need to mess around with all this [B]X-UA-Compatible[/B] stuff - lucky you.

The coloured text above at the end of each mode is the “trigger value” for each of the modes, and if you need to make use of compatibility mode, you will most likely want to pick [B]EmulateIE7[/B], or if you haven’t updated your site for IE 7 either, then the value of [B]5[/B] should do it.

It is important to note the difference between “IE 7 standards mode” ([B]7[/B]) and “IE7 mode” ([B]EmulateIE7[/B]).

“IE 7 standards mode” ([B]7[/B]) will use the standards mode of IE 7, regardless of weather or not a <!DOCTYPE> is included. “IE7 mode” ([B]EmulateIE7[/B]) will pick either the standards mode or quirks mode of IE 7, depending on the <!DOCTYPE> included. This is because IE 7 used this to let web site owners pick which mode they wanted to use for IE 7.

IE 8 mode works in the same way, except using IE 8 standards mode in place of IE 7 standards mode (confusing, isn’t it, don’t you hate the Internet).

If a web site is very large (such as from a business), and different departments run different sections, it isn’t uncommon to see some pages in standards mode, and others in quirks. Because of this issue, IE7 mode was added to work around this issue.

Setting the mode!

The value will be placed within the [B]X-UA-Compatible[/B], which only Internet Explorer 8 can currently read and do anything with, and there are a number of ways in which you can apply the setting – that number being, 2, really.

HTML

The first is using HTML, via the [B]<meta>[/B] element, which must appear between the opening <head> and closing </head> elements in each web page that you desire compatibility mode to be applied to. For example, if you wanted to force IE 8 to use IE 7 mode, you would add the one line:

<meta http-equiv="[B]X-UA-Compatible[/B]" content="[B]IE=[U]EmulateIE7[/U][/B]">

… to every web page on your site that needs to be in IE 7 mode. If you wish to use a different mode, then simply use the desired value within the content attribute, ensuring it begins with IE=, followed by the required value. For example, to use quirks mode, set the value to 5:

<meta http-equiv="[B]X-UA-Compatible[/B]" content="[B]IE=[U]5[/U][/B]">

HTTP

The other option is to use an HTTP header, which is a somewhat hidden setting that web browsers and web servers use to talk to one another.

In most cases, the majority of site owners would use the HTML version, unless they knew how to use HTTP Headers.

Using PHP to add an HTTP header

If you’re using PHP to power your web site, then you could slip in an HTTP Header snippet in to your code. To do this, you must ensure that it is placed before any output, such as using the echo or print commands.

A single line of code is needed, and looks something like this:

<?php
header("X-UA-Compatible: [B]IE=EmulateIE7[/B]");
?>

Using PHP to add an HTML element

If you’d rather use an HTML element to trigger compatibility mode, you can still use PHP to output this, with the code being placed in a position in the page than ensures the HTML element is placed in-between the opening <head> and closing </head> elements.

<?php echo '<meta http-equiv="[B]X-UA-Compatible[/B]" content="[B]IE=EmulateIE7[/B]">'; ?>

Using .htaccess to add an HTTP header

If you’ve never used .htaccess before, I would suggest not using this method on a live web site, unless you’re prepared that it may go wrong, and cause your web site to come offline for a while until you undo your changes.

If you have an .htaccess file, then you may feel this is the easiest way to add the setting, and again, this is a single line of code added to your .htaccess file, which looks like this:

Header set X-UA-Compatible "[B]IE=EmulateIE7[/B]"

Take it from here!

This is a method that should enable older web sites or web site owners who aren’t sure what all this standards stuff is about a little time to learn more about it, and find out what there web site might be missing. I would recommend this as only a temporary fix for Internet Explorer 8, and encourage web site owners to update their web pages to be more standards compliant, it is the way things are going on a much bigger scale nowadays, and will be beneficial to you later on in your web sites life and usage.

But, there is no need to panic. If you’re unable to make use of this feature, IE also includes the functionality for the user to manually use compatibility mode if your site now looks a little different than before, and can save this setting. However, as this is a new feature, and not all users are aware of it, if your web site looks odd in IE 8, but fine in IE 7, I would make use of the manual compatibility mode option for the time being, until you can update your web site.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

I've added a couple of examples that you can look at in IE 8 with the developer tools open.