Code Away

Beautiful post on removing CSS layout and going back to the good ol’ table tag. The comments are good as well, if you can locate them among the thousand-odd rants.

Actually the beauty of the post lies in the author not trying to be in preach-mode. It’s just a “screw it all I’m goin’ home” treatment handed out to display:block; float:left; layout, which has irked some gentlemen of the CSS church. For these kind-hearted people, the author takes some time out to coin a term CSS-Trolls. And could you believe it, the very same association of people replied on this post with complete disgust, on how terrible the advice is, and how the author ought to die of shame. Well, some comments were actually written by well-mannered folks, who put their point and signed off with a bow.

But let’s not talk on people. Let’s talk on the point in question. Tables or CSS?

Well it really doesn’t have to be an exclusive decision. CSS does provide a lot in terms of

• Flexibility in presentation
• Easy alterations in future
• Accessibility for visually impaired
• Pixel-level control of all objects

and other goodies. I’m a CSS fan ever since I built my first CSS-enabled website 3 years ago and realized how much I sucked in web design before.

Yet, CSS, with all its control on page components, remains a browser-based implementation. Wait, even tables are in the same league! Yes, but tables give you one assurance: If you want “Y” in the left cell and “Z” in the right, that’s how you are going to get it. No side effects with anything: pages resized, font sizes increased, browsers changed, you try it. It may look ugly, sucky design, but “Z” remains to the right of “Y”.

This one single feature of consistent placement gets screwed up when you try to use CSS. I sat with my friend once to get a layout with 3 columns, with a horizontal bar at the bottom of all three columns. Quite a number of times, the bar appeared on the right of the columns, sometimes behind the columns. It took us a good one hour to get things sorted out, after adding a multitude of attributes for the last column and for the horizontal bar. I can surmise that whatever attributes we used would produce at least some side effects in one of the browsers.

You can well say that I am not as good of a CSS coder as I think. Well, that’s the whole problem. The layout worked perfectly in one browser and it wouldn’t on others. Why does my knowledge on markup have to involve inconsistencies rendered by design specs of different browsers?

Lets take another example. A friend working in a UI framework team discussed an issue with me one day: The div appeared two pixels to the right of the desired location on FireFox, while it rendered at the perfect spot for IE. Now that’s an amazing problem, where the (heavy) component is derived from 5 other smaller units. Turned out to be a difference of rendering a border between FF and IE.

Coming out of bedtime stories, we have situations where “the boss wants the code complete by evening”. It is useless to sit and gaze at the beauty of CSS at times like these. Just get yourself some nice tables where necessary, use CSS where easy and roll it out, as many have preferred.