To understand what quirks mode is, in this second part of our interview on Blog Talk Radio with John Gallant, we need to learn a little history. John begins by explaining that in the early days of the Internet there was no such thing as Quirks mode. In fact we did not even have doctypes (Document Type Declarations). What we did have was the HTML element as the root of your HTML page. Then, browser wars started occurring and browsers started going their own way.
An example of how the various browsers rendered the pages differently is how they handled padding and borders. The question to be answered was, do you put the padding and borders outside your stated width and leave the width for your content area in the middle? Or do you subtract your padding and borders from your stated width, leaving a smaller content area inside?
What happened, explains John, is that browsers such as Netscape, for instance, obeyed the specifications set by the World Wide Web Consortium (W3C), which is to put the borders and padding on the outside of the stated width or height. Microsoft with Internet Explorer, on the other hand, decided to put the borders and padding inside the stated dimensions. They kept this practice all the way to IE5.5, causing ‘major hassles’ for everyone. In those days, if you had padding and borders and widths and heights on elements, you had to provide ‘hacked values’ or you could use a ‘box in a box’ approach where your outer boxes got your dimensions and your inner boxes got your borders and padding.
The situation got so bad, says John, that ‘even Microsoft had to listen’. So Microsoft agreed to obey the standard box model. However, they did not want their new browser, Internet Explorer 6 (IE6) to break all those old sites that were designed for earlier versions of IE. So to get around that problem, they built a ‘switch’ into IE6 which could render the page the old way, or the new way, depending on what is stated in the Document Type Declaration (doctype or DTD). John emphasises the need to use proper syntax in your doctype or you will throw the browser into ‘quirks’ mode. It is also important, says John, not to have anything in front of the doctype. John also recommends the Web Developer Toolbar by Chris Pederick (http://chrispederick.com/work/web-developer/ ) which is a plug in for the Firefox browser. There is an indicator on that toolbar that instantly tells you whether you are in ‘standards’ or in ‘quirks’ mode. John compares quirks mode to ‘whack a mole’ and he recommends highly that you stay away from it.
For a list of the links that John refers to and to listen to the full interview please go to: http://www.blogtalkradio.com/everyones/2010/06/14/css-junkie-john-gallant-second-interview .