It's all about the layout

by BD Pisani - 2005 nov 27

Some day, and sooner rather than later, website designers will be forced to conform with stricter rules regarding page presentation and content. Don't follow the rules, and browsers won't be able to render your site properly. Ol' B2 is simply trying to get his act together before "some day" becomes today...

Tediously long story short and as most Web hackers know, HyperText Markup Language (HTML) evolved through various versions from 1 to 4.01, with each successive version outlining stricter rules. HTML gave way to the Extensible HyperText Markup Language 1.0 (XHTML), a reformulation of HTML 4 in XML 1. The XHTML family of current and future document types and modules are evolving to be viewed, edited, and validated with more applications than in HTML. Thus has been the Web's evolution from HTML's Standard Generalized Markup Language (SGML) to Extensible Markup Language, or XML.

Throw in JavaScript, the Document Object Model (DOM), and Cascading Style Sheets (CSS), designed to separate structure from presentation, and the end-game in all of this is strictly conforming Web documents -- which is what I started writing about two paragraphs ago.

Hacking the basics

I am a Web hack, untrained in formatting languages and barely self-trained in rudimentary HTML and CSS, so I state with no qualms that from time to time, I need help with the transition from a website that will not validate to one that conforms to current acceptable standards. Thankfully, the Web is chock-full of worthy people who do all they can to assist yahoos like me -- yahoos without formal training or extensive experience but who are willing to do all they can to learn as much as they can.

This latest version of The B2 Journal was designed using a base, nondescript layout freely provided by Project Seven (PVII), an innovative and very good design group based in Ohio. PVII is heavily into CSS but does not believe in the CSS workarounds and hacks so often employed for equal-height column layout to satisfy the rendering of all browsers or to replace table-based layouts.

According to PVII, If you want to lay out your page without tables and still have equal-height columns, then you can use CSS hacks or JavaScript. In principle, hacking CSS to produce equal-height columns is not all that much better than nested tables or spacers. They go on to add that in their opinion, many of the people who led the way with "creative" table design in the late 1990s are now among the leading proponents of CSS design hackery.

They state their case in this manner:

"When what you want to happen (equal columns) is beyond the natural capabilities of html, xhtml, or CSS, you can try one or more hacks - or you can take a different (and perhaps more pragmatic) approach and use Javascript. While (x)html markup addresses a page's structure and CSS its presentation, Javascript addresses a page's behavior. Javascript allows you to separate a page's presentation from its behavior. And so long as viewing your page does not require javascript -- but is merely enhanced by it -- you can't lose."

Sounded good, so ...

This sounded good to me so I tried it (after trying several of the standard hacks). Although not well-versed in JavaScript and thus not able to understand all of its arguments (yet), I am satisfied with the way the script performs and like the fact that my layout works in all (er...most) of today's browsers -- all without the user having to rely on JavaScript.

More important and for the first time ever, all my HTML and CSS pages validate with the World Wide Web Consortium (W3C). No more hacks, no more workarounds, no bizarre rendering in a browser used by three percent of the Web population -- it is worth it to include one small JavaScript. Of course, the PVII layout itself restricts creativity somewhat, but it's not a show-stopper so I can live with it. Now it's on to validating strict XHTML -- but I guess I should learn it first.