Strict vs Quirks Mode

There are two different modes that modern browsers can use to interpret your Cascading Style Sheet formatting; Strict and Quirks.

When CSS was implemented in early browser versions their support did not match the World Wide Web Consortium (W3C) www.w3.org Link opens in a new window standard. To make sure that websites rendered correctly in different browsers, web designers used CSS according to the way these browsers worked, so most websites used CSS in ways that did not quite match the specifications.

Standards compliancy started to become important, but this meant that if browsers were designed to meet the W3C specifications many websites based on the earlier interpretations of the standard would not display properly in newer browsers. The solution was to allow web page designers to chose between two modes: Quirks mode for the old rules, Strict mode for the standard.

According to the standards, any HTML document should have a Document Type Definition (DOCTYPE or DTD), older pages written before the standardisation would not have a DTD. Therefore a page with no DTD would render in Quirks mode, but if the web designer included a DTD this would trigger Strict mode.

Example

The following CSS is used to define the <div> in both illustrations below.

#demo { width: 200px;
     margin: 10px;
     border: 5px solid #8080ff;
     padding: 10px;
     background-color: #cccccc; }

The content area has been given a white background so the padding around it is easy to see.

Screenshot from a page without a DTD as seen in Internet Explorer 6. Screenshot from a page with a DTD as seen in Internet Explorer 6.
image demonstrating a page without a DTD as seen in Internet Explorer 6 image demonstrating a page with a DTD as seen in Internet Explorer 6

When using Quirks mode the browser makes the width of the entire <div> 200 pixels including the border and padding. In Strict mode the content area of the <div> is 200 pixels, excluding the border and padding, in accordance with W3C specifications. In both cases the margin behaves the same, separating the outside edge of the border from the adjacent elements.

This is not the only situation that you would get different results, but it is one of the most obvious and simple to demonstrate. See the browser comparisons for more examples.

If the page had been designed to accommodate browsers using early interpretation of the standards and the choice of modes was not available in this instance the <div> would have changed width, possibly becoming too wide for the space available and mis-aligned an adjacent element.

You can avoid this becoming a problem if you choose to never or always use a DTD on any web site design, then all your pages will render using the same set of rules.