64 Hostile CSS delivery

Most of you are probably familiar with the CSS Zen Garden. Those who aren’t should learn that it’s a project that offers an XHTML document and challenges graphics designers to obtain the best looks entirely through the means of valid CSS, without touching the markup.

While a fine challenge in itself, some could argue that it’s not a particularly difficult one. Indeed, the proposed XHTML from the Zen Garden is heavily laced with superfluous id’s and markup and generally lots of hooks that are meant to make the designer’s job easier and thus allow for maximum creativity. Not to mention it’s valid XHTML rendering in strict mode. The Zen challenge has more to do with using CSS creatively that with applying it to the markup.

However, those of you in search of a truly dirty challenge should pay a visit to an ODP editor profile. The ODP (Open Directory Project) was started by Netscape back in the 90’s. Its aim is to catalogue and categorize as much of the Web as possible, entirely through human volunteer effort.

Each volunteer, called an “editor”, has a profile page which lists a few things about the person in question. Most of the page is self-generated based on the person’s contact info and project assignments. The only part of the page that the editor can modify freely is the profile field, which accepts HTML as well.

Let’s pick a random profile page to show you what I’m talking about. Here’s the page for mariusgm (or you can see a mirrored copy here). If you view the source you’ll probably feel the hair stand up on your back. The DOCTYPE may say HTML 4.0 Transitional, but make no mistake, that markup was not written during the 21st century. It’s chock-full of the kind of HTML-based “styling” characteristic to the 90s.

Therein lies the challenge. Put yourself in the shoes of the editor. The only markup you can deliver is through the means of the profile field, which gets rendered as you can see in the “Profile” section. What can you do to make it look good in the modern browsers?

If you’re up for it, stop reading now, save a copy of the HTML and inject whatever markup you want inside the <blockquote> that follows the “heading” that says Profile. Anything goes, including JavaScript, although you may want to lay off it, since having access to the document DOM spoils all the fun. You get extra brownie points for making the thing look the same in as many browsers as you can.

If you feel like cheating, take a look at the next page, where I’ll give you some starting pointers on how you might maneuver around the monstrosity.