[Skip to the Main Content]

Standard Compliance has Two Different Meanings

Websites that are standards compliant may not been seen as standards-compliant. It—Actually—makes sense. However, when I was first learning how building websites with web standards was done, it made me crazy.

Web standards is Web Standards. Everyone should want websites that are compliant with web standards doctrines. Or, as commonly stated, “Everyone should have standards complaint sites”. Sites whose (X)HTML and Cascading Styles Sheets (CSS) pass validation, meets Accessibility guidelines and Universality principles.

That’s simple.

Then, you’ve got “Standards-Complaint Mode” where standards-compliant refers to User Agents (UAs) rendering a website either in standards-compliant mode or quirks mode. And, for added confusion, MS refers to quirks mode as Compatible Mode (or, Compat). [Note: Quirks mode and strict mode by Peter-Paul Koch offers an explanation of the differences found in standards and quirks modes.]

Think of it like this. Browsers know what they are suppose to do in “standards-compliant mode” and they guess in “quirks mode”.

This is what the Document Type Declaration, e.g., <!DOCTYPE html> [or, Document Type Definition (DTD), e.g., <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">] does. It triggers standards-compliant mode.

What does the DocType do? Exactly.
It indicates how browsers interpret Cascading Style Sheets.

Most web developers needn’t concern themselves. They’ve copied-and-pasted DocTypes from existing sites and Everything works fine. (And, most CMS and Editors, e.g., Dreamweaver, templates default to XHTML 1.0/Transitional.) [Note: HTML 4.01/Strict and XHTML 1.0/Strict or Transitional invoke standards-compliant mode.] I could not recall visual examples of differences between standards and quirks modes: I did one. The following illustrates one reason why one should continue that practice.

I took the home page of this site, duplicated it but removed the DocType, gave it a new URI, i.e., doctype-missing.html and used forward/back buttons in various browsers to view the differences. IE6 was most dramatic.


Elementary Standards screenshot of home page as seen in IE6 quirks mode

The header is set-up with margins.
div#header { width: 690px; height: 57px; margin: 0 0 0 240px ; padding: 0; }
The left column is absolutely positioned.
div#leftColumn { position: absolute; top: 75px; left: 0; width: 300px; margin: 0; padding: 0; text-align: right; }
The right column absolutely positioned.
div#supplemental { position: absolute; right: 10px; top: 100px; width: 230px; color: #333; font: .9em Times, serif; }
The middle column is set-up with margins.
div#fluidity { margin: 25px 240px 0 300px; padding: 0 10px 0 20px; }
The error occurs because of this {position:absolute}.
p#jumpContent { position: absolute; top: -60px; right: 20px; display: block; width: 100px; »
height: 50px; margin: 0; padding: 0; text-indent: -9999px; }

IE6 in quirks mode was the most dramatic because of its understanding of negative positioning: it has difficulty. It inserted the “Jump Content” paragraph into the HTML thereby forcing the “Header Division” downwards by 50px.

[Note: Safari, Firefox - Mac/PC and Opera - Mac/PC shifted text upwards due to collapsed padding. IE6 also collapsed the site preamble. (See second arrow.) Opera - Mac/PC shifted the absolute positioned left and right columns upwards by 10px.]

This site doesn’t—Really—have concrete adverse affects with being rendered in quirks mode (excepting IE6. And, even that could be corrected by statically placing the “Jump Content” paragraph in the HTML sans negative margins). The 3px and 10px shifts are negligible; the whitespace of this site absorbs them.

However, pixel-perfect designs would fail, wouldn’t they.

Those are the two differences of standard(s) compliant.

Sean Fraser posted this on February 8, 2007 09:12 AM.

  • Add to Technorati Favorites
  • de.licio.us: http://www.elementary-group-standards.com/web-standards/standard-compliance-has-two-different-meanings.html
  • furl: http://www.elementary-group-standards.com/web-standards/standard-compliance-has-two-different-meanings.html
  • reddit: http://www.elementary-group-standards.com/web-standards/standard-compliance-has-two-different-meanings.html


Devon Young wrote this at February 8, 2007 12:47 PM

That sounds like fun! I think I'll try seeing how my current design would look in quirks mode. I haven't bothered with quirks mode in years because strict makes life so much easier for me.

Comment Author Gravatar
Sean Fraser wrote this at February 8, 2007 01:01 PM

Devon: It is fun. I monkeyed several well-known sites: copy code, set-up versions in Strict/Transitional and Standards/Quirks, paste onto my server and view in different browsers. Things do change.

I prefer Strict, too.

Comment Here

Reply guidelines: Basic HTML (a href, p, code, blockquote, dl, dt, dd, ul, ol, li, cite and q) are allowed. Line breaks and paragraphs are automated.

Inappropriate, unwarranted or self-aggrandizemented comments may suffer redaction. Or, deletion.

[Note: A gravatar, or globally recognized avatar, is that small image in the comments. Gravatar sets-up them.]

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2007 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.

Palm trees on a grassy field in Hawai’i

Main Content Returns thus