The Holy Grail Liquid-Layout, No Quirks Mode

by Matthew James Taylor on 29 July 2008

The Holy Grail Liquid-Layout, No Quirks Mode

A lot of people have noticed that my layouts include the following XML declaration as the first line of HTML:

<?xml version="1.0" encoding="utf-8"?>

This line of code causes Internet Explorer to use quirks mode, something that a lot of people don't particularly like. This line can also cause problems when people copy my layouts. sometimes they forget to add the XML declaration and as a result their designs don't display properly in older versions of Internet Explorer (I get a lot of emails about this). Well in this post I want to publish a new version of my Holy Grail liquid layout that does not require the XML declaration. It is 100% Quirks Mode Free!

No IE conditional comments

In addition, this layout only requires one stylesheet. My original version used IE conditional comments to expose a second set of CSS rules to older versions of Internet Explorer. This is not required now either.

Both of these improvements help to simplify my layout without removing any of the original features. The only thing I've needed to add, is one extra div, a small price to pay for this extra simplicity and compatibility.

The main features

  • No Quirks Mode
  • No IE conditional comments
  • No CSS hacks
  • iPhone & iPod Touch compatible
  • SEO friendly
  • Full length column background colours
  • No Images
  • No JavaScript
  • Resizable text compatible
  • FREE for anyone to use

View the demo

When I get time I will try to create quirks-mode-free versions of all my remaining layouts and I'll post them here when they're done.

Update I have now updated my Perfect liquid-layouts so they are all quirks-mode free.

Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor