APEX - Association for Positive Ethical eXchange

APEX News - Internet Explorer 8 Quirks

Disclaimer: Articles published express the views of the contributing Authors and are not necessarily those of the APEX Board of Directors and / or the APEX Newsletter Editor.

iE 8 Is An Improvement

Thanks to Microsoft’s auto-update feature the new Internet Explorer 8 has gained a healthy share of the browser market. Fortunately for web designers, IE 8 is the most standards-compliant version of the browser yet. It fixes the bugs that have plagued IE 6 and even IE 7 and works almost perfectly with version 2.1 of CSS!

That means your carefully crafted web designs should look nearly the same in IE 8, Firefox, Safari, and Opera with little or no tinkering. But you can’t say the same about IE 6 or IE 7 which require some browser-specific code to make many designs look right.

Divider

[ TOP ]

But Is IE 8 A Chameleon?

IE 8 is sort of like a chameleon: It can take on the appearance of a different version. If you’re not careful, it may not display your web pages the way you want it to. For example, and most importantly, you must include a proper doctype. Without a doctype, browsers switch into quirks mode. Well, when IE 8 goes into quirks mode it tries to replicate the look of IE 5. (!?)

But wait - there’s more! IE 8 can also pretend to be IE 7. When someone viewing your site in IE 8 clicks a “compatibility view” button, IE 8 goes into IE 7 mode displaying pages without IE 8’s full CSS 2.1 goodness. The same thing happens if Microsoft puts your website onto its Compatibility View List - a list of sites that Microsoft has determined look better in IE 7 than in IE 8. If you’re designing a site you won’t want IE 8 to act like IE 7. . . ever.

Divider

[ TOP ]

There Is A Rescue Plan!

Fortunately there’s a way to tell IE 8 to stop all this nonsense and just be IE 8. Adding a single META tag to a web page instructs IE 8 to ignore Compatibility View and the Compatibility View List and always display the page using its most standards-compliant mode.

‹meta http-equiv=“X-UA-Compatible” content=“IE=edge” /› (altered to suit your doctype of course.) We are told that putting the above instruction in the page’s ‹head› section (below the ‹title› tag is a good place)

Note: I found that putting the meta tag in the page’s ‹head› section below the ‹title› tag did not allow for W3C page validation so inserted the code as per the below sample and the pages remained W3C valid (souce code altered to suit your page doctype of course.)

Divider

[ TOP ]

‹!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”› ‹html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”›
‹head›
‹meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /›
‹meta http-equiv=“X-UA-Compatible” content=“IE=edge” /›

Is It Future Proof!

We are told that this tag will work for future versions of IE as well. The “IE=edge” part of the tag will instruct versions of Internet Explorer that are released after IE 8 to also display web pages in their standard mode.

The Downside . . .

Unfortunately you must insert the meta tag into every page of your website. Is it worth all the trouble? That is for you to decide . . .

Divider

Acknowledgement: The above article was provided by and is Copyright © R. Serong 2009 - 2010 with sole publishing rights held by APEX and may not be republished and / or redistributed without the written permission of the Author.

[ NAV | TOP ]