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
Holy Grail 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.
Follow me...