Disabling the Quirks mode under Internet Explorer
Motivation for writing
Few days ago I noticed that my blog is not shown correctly under Internet Explorer.I was quite sure that it wasn’t the case 1 month ago, because I would have noticed such a problem. It looked like this :
So I started debugging it and I reached to an interesting conclusion.
Margin auto is not working correctly under Internet Explorer
Obviously there was a problem with the margins, and more precisely with the margin:auto property. If you’ve read my post on static website design, you should know that the margin auto property is usually is used to centralize divs horizontally.
What is the Quirks Mode
While I was debugging under Internet Explorer, I noticed that it’s running in the so-called Quirks Mode.
The Quirks mode in Internet Explorer (but not only) is a compatibility mode that helps with the visualization of older pages, which are not compatible with the W3C standard.
What triggers Quirks mode in Internet Explorer
By default it’s switched off, but there are some factors that usually triggers it. For example, the DOCTYPE declaration in the beginning of your html. The proper HTML5 syntax is as follows :
<!DOCTYPE html>
The following excerpt will also not trigger Quirks mode :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The following declarations will, however, trigger Quirks mode :
<!DOCTYPE html PUBLIC>
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- some comment here --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The problem with the first declaration is that it is uncomplete. In the second and third ones, there is content before the DOCTYPE declaration, which is not standard compliant.
When I switched to IE standard 7, 8 or 9, everything was working fine. So in order to avoid Quirks mode activation, you should comply to few simple rules.
Rules to obey in order to avoid Quirks mode activation
- The DOCTYPE element should be the first thing you include in your page
- Don’t include comments/javascript/xml or whatever before the DOCTYPE element
- Check the DOCTYPE declarations per standards here and use the latest whenever possible
My problem is just the opposite–I want IE8 to automatically switch to Quirks mode when I view the so-called "legacy" pages I've created over a period of several years. All other browsers I've tried (Safari, Chrome, Firefox, even SeaMonkey) render my pages–written with html 4.01 transitional without the DOCTYPE at top–pop up correctly, as I intended them. When viewed through IE8 Standard mode, all of the text I placed within tables is center-aligned–not aligned left, as I had intended. This makes for amateur-appearing web pages, to say the least.
Here's the problem. Up until a couple of days ago, my legacy pages–an example of which is http://inyo.coffeecup.com/site/barstowfossils/barstowfossils.html — were all rendered correctly in IE8, without having to deliberately, manually, switching to Quirks Mode (from the Tools-Web Developer options). Quirks popped in automatically–now it does not. Now I have to go into Tools-Web Developer and so on to switch over the Quirks mode. I am fearful that everyone else out there in cyber land is having the same problems with the center-aligned text problems on my pages. What's going on? What's the solution?
By the way, when I preview one of my pages in IE8, all is good–no center-aligned text within tables. But, when I view that same page through the World Wide Web, all is not good–center-aligned text appears within tables.
Hi Inyo,
The problem is in the <center> tag before every one of your tables. That is basically causing every inner element to be rendered that way. Just remove these tags and use CSS instead.
Hope this helps.
Kosta