Quirks Mode

Contact Us or call 1-877-932-8228
Quirks Mode

Quirks Mode

Modern browsers have at least three modes in which they can display content:

  1. Standards-compliant mode
  2. Almost standards mode
  3. Quirks mode

In standards-compliant mode, the browser does its best to display the page according to the latest CSS standards.

In almost standards mode the browser will treat everything the same as in standards mode except for the placement of images inside of table cells. Images will align with the very bottom of a table cell instead of text baseline that strict standards mode dictates.

In quirks mode, the browser displays the page as if it were an older version of the same browser. The purpose of quirks mode is to make pages that were designed for the old browsers display the same in the newer browsers.

Controlling Browser Modes

The correct DOCTYPE declaration at the top of the HTML page sets the mode modern browsers will display the page in. Wikipedia provides an excellent guide to the different DOCTYPE declarations and the mode effect it has on browsers at http://en.wikipedia.org/wiki/Quirks_mode.

Setting the DOCTYPE gives the page designer control over how the browser agent will interpret and render HTML of the page.

Design Strategy

When designing your pages, we recommend you use the following strategy:

  1. Design for the most standards-compliant browsers first.
  2. Use a stylesheet reset.
  3. Check your pages in any and all browsers that you decide to support on your website. This would include earlier versions of browsers that might not interpret current standards correctly and may require adjustments to your pages and style sheets.
  4. Don't use tables for page layouts. HTML tables should be reserved for what they were originally intended, displaying tabular data. Using the CSS techniques you've learned in this course will, if done properly, give you clean coded layouts that are also standards compliant.
  5. Use the HTML 5 doctype (<!DOCTYPE html>). Not only is it cleaner but it will set browser agents to render your page using the latest standards mode. Only use the more verbose doctypes on pages that rely on quirk mode tricks or older table layouts.

Depending on your need to support other browsers, you may wish to repeat steps two and three on those browsers as well.