The Holy Grail Liquid-Layout, No Quirks Mode

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

Demo time

Holy Grail Liquid Layout: No quirks mode

The Holy Grail 3 Column Liquid Layout: No quirks mode

A new version of my 3 column liquid layout that does not use quirks mode or IE conditional comments

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.

Updated: 29 Jul 2008

First published: 30 Jul 2008