Website loads in Quirks mode in Internet Explorer

Hello,

There is one common mistake that we commit sometimes i.e. relying on Internet Explorer to do the job right. But that’s not mistake on IE’s behalf because we are doing something wrong with the way we are handling our HTML document.

Nowadays we all use MVC and our site is based on a common template, When declaring our styles and tags we miss one most important tag DOCTYPE or a Meta tag to tell IE how it should render our page.

According to the MSDN Quirks mode is defined as

Under Quirks mode the behaviour matches Internet Explorer when rendering a document with no doctype or a Quirks doctype. It is similar to the behaviour of Internet Explorer version 5 and the Quirks mode behavior of IE6, IE7 and IE8.

So the styles and layout will seem to mess up.

The Fix

Using Doctype

Easy fix to this problem is to declare a valid doctype for your layout template or HTML page as shown below

You can choose any that fits your document

Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

Or other XHTML based DOCTYPEs

Using Meta tag

Include this meta tag in your page header

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

I will always use DOCTYPE rather than Meta tag to tell IE how it should render current document.

For more information on how this works please visit the link I’ve provided in Useful Readings.

 

This will fix your page instantly and Internet explorer will load your page properly i.e. it won’t load your page in quirks mode anymore.

There is another thing you can do however if you would like to test your pages across different version of IE

Press F12 while you have your internet explorer opened

Developer tools will appear as shown below

Internet Explorer Developer tools

In the above picture you can see that Browser mode is set to IE9 and my Document Mode is set to IE9 standards

Now you can play with these modes. I can test my webpage in IE8 standards or IE7 standards and also in Quirks mode just by flipping the Document mode settings from IE9 standards as shown below

Changing Document mode in IE

This way you can test your site across different document modes and versions of IE.

So remember that first line of your page should be your DOCTYPE else page may appear messed up because it by default will launch itself in the oldest possible standards IE can support.

Advertisement

 

Useful  Readings

http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx

http://www.w3.org/QA/2002/04/valid-dtd-list.html

I hope this helps

Cheers

 

 

 

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Speak Your Mind

*

CommentLuv badge