Friday, August 04, 2006

Pain in the CSS

Wondering where I've been lately? Besides sweltering, I've been struggling with layouts.... you know, improving how things look & lie on pages. In theory, tables are passe as a way of laying out web pages - they're the device of rank amateurs. They're primitive. Etc. After all, the table was designed to hold tabular data, not to provide a layout grid for designing html pages. The way the pros are doing it, it would seem, is either exclusively (or nearly exclusively) with CSS. CSS stands for cascading stylesheets, BTW. (More on Cascading Stylesheets can be found at - where else - Wikipedia... and it's mostly true, too! -

The concept is good - set up a set of styles, styles that can be controlled at a granular level, but also can be applied globally across a webpage or (more powerfully) across an entire website. It can do the most simple things, such as keeping your fonts consistent, or more powerful and complex things, such as positioning elements (including the ability to even layer elements in some cases), be they boxes of text, graphics, or anything else that can be held within those elements. (e.g., if you designate a section using the DIV tag, you can then apply a specific style to that given element).

Clearly, you should be able to reset your pages - thusfar laid out in table format - through CSS. Use of CSS to lay out a webpage is actually a more elegant form of coding than the use of a table... why, because it separates out the design from the content! Anyhow, without going further into the philosophy of CSS, you should know that my skills are only low-level/moderate in CSS. I was taught html in the era of all tables - and using tables to lay things out seemed pretty sophisticated at the time!

Anyhow, as I redesign elements of our site, I want them coded to the newer standards. So I'm trying to use all CSS. But it's like playing whack-a-mole! Get the display correct for one browser, it looks all wrong in another. There are special "box model hacks" - workarounds for various browsers' incorrect implementations of CSS; there are issues with nested DIVs and questions of positioning context - absolute vs. relative positioning, for example (and relative to what). In case you're stuck in the same place I am, you might be interested in this fairly well-written article on nested divs and absolute vs. relative positioning, found at:

And if anyone has mastered the intricacies of CSS and longs to come to my aid, no $ attached, please let me know.

No comments: