A report of CSS trouble with IE7 in Deko Boko 1.0 has led me to release a fairly major upgrade – Deko Boko 1.1 is available for download at wordpress.org:

• I’ve completely rewritten the XHTML and the CSS for the contact form. If you’re upgrading, and you’ve customized your contact form, you’ll need to migrate your changes. The reason is that the widely used CSS “clearfix” code that I had in Deko Boko breaks in IE7 (I know, I’m late in catching this – I’ve switched to Ubuntu on my laptop and I wasn’t keeping up with the latest Microsoft nonsense). For reasons explained in my rant below, this pushed me to do a full rewrite, which simplifies both the markup and the CSS.
• One of the features of Deko Boko is that is it plays nicely with WP-reCAPTCHA (the official reCAPTCHA plugin for handling spam in comments). The latest version of WP-reCAPTCHA changed the name of the WordPress option variable where it stores its API key, so Deko Boko now looks for it under the new name and the old name.
• I added a language selector to the Deko Boko settings menu, so you can choose a language other than English for the reCAPTCHA widget.

<rant>The challenge with writing a plugin like this is keeping both the XHTML and the CSS at a level where you don’t need to be a coding guru to make changes yourself. I want the Deko Boko contact form to be customizable by people with beginner-to-intermediate level coding skills. But there are a multitude of variations in how CSS is implemented in different browsers, not to mention the things that are just plain broken. Nowhere is this problem worse than forms. So developers are often forced to choose between doing semantically “incorrect” things in their markup (like using br tags to force certain layout effects), or writing hundreds of lines of complicated CSS, often with filters to deal with incompatibilities between browsers.

Unfortunately the solution for the IE7 “clearfix” problem I mentioned above breaks clearfix for IE6 (requiring an IE6 filter to then fix that). IMHO clearfix is a hack to begin with, needed to deal with an oversight in the CSS model. And in any event, the code needed to fix the problem for definition lists was way too fragile for a plugin like this, which is meant to be flexible and extensible. So I dropped the definition list in favor of an ordered list, following the techniques described in Cameron Adam’s excellent article on form layout. His approach to form layout is the best I’ve seen, with some clever yet simple approaches to the markup (the right word is “elegant” – as it’s semantically correct too) to get around some of the most common problems with form layout. It’s also such a well written and highly detailed article, that I can simply refer you to it if you want to extend the layout of the Deko Boko contact form to suit your own needs 😉 .</rant>