Yeah. I know. This is the umptieth article on this topic. But this one is mine, ok?

I’m busy with a redesign of the site. One of the things is that I want to be more flexible in redesigning the site so I started looking for boxes (with or without rounded corners) that were robust, flexible, and require a minimal amount of markup. Preferrably one that can underlay a single image so that I don’t have to cut up stuff in the Gimp.

So, what do you do? Search the web. And find half a million solutions for CSS boxes. I settled on one and started reworking it for my own needs - and of course, as you have it with CSS, it kept breaking. Either in Firefox, or in IE, or in both. And it was never clear why it broke.

Here I am - 20 years professional experience, an expert in more programming languages than I care to remember, I worked with raw TeX and LaTeX for years so I should know a bit about styling and layout, and I don’t understand what is going on! The box markup is a strange collection of DIV tags, needed for the CSS to attach the various underlay images to, it looks counterintuitive, and - there’s the cincher - where is “semantic markup” in a bunch of extra DIVs that are just there for layout reasons? Here, semantic markup in 2008:

<div class="dialog">
 <div class="content">
  <div class="t"></div>
  <!-- Your content goes here -->
 </div>
 <div class="b"><div></div></div>
</div>

You can call that “semantic markup”, but I wouldn’t do it if Knuth or Lamport are around. I call it “trash”. And this is one of the cleaner and more robust solutions that I have found. Why would it be that there are a gazillion ways to do this with CSS, but only a couple of straightforward ones to do this with table tags?

Here’s what 20 years of software engineering experience tell me: all CSS box solutions are hammers on a hunt for nails.

Don’t misunderstand me - CSS is nice (not great, just nice, ok?). It helps in separating content and design, can greatly help in increasing site speed, but it is not a panacea. No single CSS-only solution is as robust and understandable (read: maintainable) as a well-chosen mix of CSS and table-based layout. A good craftsman knows the difference between a hammer and a screwdriver and also knows which one to apply when.

Bottom line: my site will use tables for boxes. Later this week, I’ll share how I keep the markup trivial nevertheless - turns out that semantic markup aided by some Javascript goes a long way into solving this problem.

This entry was posted on Monday, February 18th, 2008 at 6:22 pm and is filed under Software Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Stumble it!  Post to del.icio.us