christine ibbitson's blog

CSS Zen Garden

I am constantly amazed each time I visit CSS Zen Garden. Created by Dave Shea, CSS Zen Garden is a site that defines itself as "a demonstration of what can be accomplished visually through CSS-based design." The objective of the site is to provide a resource for designers to point out the benifits about CSS-based design.

The method is straightforward. Download the HTML and CSS and "modify the style sheet in any ways you wish, but not the HTML." The outcome is anything but ordinary. Each interpretation and modification of the style sheet is so different from the one before it and the one after it. Ideas seem to go for ever and ever.

It brilliantly illustrates that designers are only limited by thier own creativity. And how imformation with strict guidelines can be interpreted in so many ways.

Troubleshooting Code

Recently I was required to figure out why the CSS and HTML files were not working after the client uploaded them to the server. He provided an edited HTML file as well as the current path to CSS.

Task: Compare the working original HTML file with the client’s edited HTML file.

Solution: Use a program that compares and highlights the differences between two files.

There are plenty of Freeware and Shareware programs that allow you to compare two documents. For instance TextDiff by Angus Johnson has customisable colour highlighting to illustrate the file difference, search and replace text, multiple undo/redo of text changes and generates a report of the file difference.

Something that might take hours to troubleshoot can be done in a jiff.

As it turned out it the HTML document type was not declared correctly.

Also recommended: A fresh pair of eyes.