My CSS War

I’m in the process of redesigning my work Web site (and probably the sites for Nuketown and the GriffCrier as well). This time around my goal is to avoid cheating with my code, which basically means I want to avoid using any of the hacks or tricks that Web designers typically use to create a decent looking page.

Examples of such tricks include using tables to control page layout or invisible gifs to force tables, text and images to align properly. Both of these things are sins among Web designers, but we all do them because it’s the only way to get pages to display properly.

So how does one go about not cheating? Well, for one thing, you use the current XHTML 1.x standard, which is the successor to the antiquated HTML 4.x standard. And for another, you use Cascading Style Sheets — specifically the CSS2 specification — to control both the appearance of text on the page (including fonts, text size, and colors) and the page’s layout (what appears where on the page).

I’ve spent the last two weeks working with CSS2, creating some basic and not-so-basic layouts. And I have come to the conclusion that it’s pretty darn nifty … but not quite nifty enough.

The biggest problem with CSS is that while it’s supposed to replace tables for layout, it doesn’t provide the same degree of control that tables do. For example, there’s no way to lay down three equal-sized (but variable length) columns AND to place text beneath those columns that automatically moves. And to then surround the entire contents of the page with a 2px thick border that also expands with the content it encapsulates.

Oh I can do some of these things — in fact I can get a page to about 90% of where I need it to be. But I can’t get it all of it, at least not without forcing the entire Web site to be designed based on a fixed width and height which just isn’t acceptable (in part because the length of the content on each page is variable, and because a fixed width/height design is also a kind of cheating).

So what to do? There’s not much I can do save keep fighting with CSS and hopefully come up with something that works. If I can’t, then I’ll probably have to do something that mixes together an old-fashioned (and cheat-based) table layout with a newfangled CSS site. That later solution isn’t something I want to do, but in the end, it may be the only acceptable solution to the problem.