Table-free layout: is this the new best practice?

[mordie]

I've been out of the Web world for three years so I've missed a lot of discussion. Is CSS positioning (i.e. tableless layout) the way we should be building pages right now? Or do we need to continue with the way we've been doing it all along?

If the time for CSS layout is now, why are most of the best Web builders sticking to tables? And what about the older browsers still out there? Can they present our layouts correctly?

[tedster]

We developed a good number of sites without tables for layout. But a few months ago we backed off. It's a wonderful ideal, but if backwards compatibility means something in your market, then getting a good cross-browser layout requires a lot more development time without tables -- full of hacks and workarounds. That kind of time just isn't economically feasible in many markets.

Currently, I usually set the basic layout with a table, but then use CSS within that table's cells for the rest of the layout. I get good cross-browser results much faster that way, and can focus on strict, validated mark-up. Tables are still valid mark-up, after all ;)

However, just so that SuzyUK doesn't come roaring in from the CSS Forum and pop me upside the head, I will say that the all-CSS-layout folks are amazing, intrepid trail blazers. But I'm just not made for the pioneer life.

[Wlauzon]

I am pretty new to CSS, but from what I see so far is that CSS is a great ideal, but it ain't there yet. Or rather, the browsers are not there yet.

Once I got beyond the fairly simple things in CSS and tried doing tables etc, I found I was spending more times trying to find tweaks to fix various browser glitches than I was doing the website.

So for now, I am using what works well, learning the rest as I go along, and hoping that someday it will get better. I have seen some pretty neat stuff done by those really dedicated to it, but I just don't have time trying to tweak every thing to fit all major browsers.

[dcrombie]

I'm with tedster on this. You should be able to get your layout down to a single table and use CSS for the rest. That way your content sits in roughly the same place in any browser.

[limbo]

but if backwards compatibility means something in your market

This is a key point. Are you prepared to leave some users high and dry? Even the hardcore CSS'ers often don't bother with anything further back than V5 browsers.

Personally I plan to do all my layouts pure CSS - I take so very few hits (0.01%) with antique user agents older so I feel happy to take this stance, the question is, are you?

[Wlauzon]

Are you prepared to leave some users high and dry?

The short answer is yes.

About a year ago we made the decision to not worry about NN4, IE4, or webtv.

From our site logs those 3 combined made up less than 1% of the total. I would rather spend my time making sure it works right in FF - with some 10-20% of the market - than I would for NN4, with something like .4%.

[jetboy]

Table-free structure sites will work back to version 5 browsers with minimal hackery. By version 5 I mean IE5, Netscape 6, IE5 Mac and Opera 5. If you're not concerned about the last two on the list it's even more straightforward.

Others have coded layouts that work in NN4, but I have to admit that I've left version 4 browsers behind. As long as they get a site that works, I'm not particularly bothered if it looks pretty.

[mordie]

Thanks, folks. Excellent responses with great information.

Now tell me . . . where are the best sources of info on which browsers need which kind of hacks?

[jollymcfats]

We've moved to all CSS as well. The strategy we took with pre-5.0 browsers is to split out our CSS-P into a separate file, and hide it from the antiques. (A combination of CSS include hackery and a bit of mod_rewrite.) We also disable the positioning for handhelds.

The site markup is designed to devolve gracefully without the positioning. So the net result is that we've got a regular, pretty site and a version that works well on the latest gadgets with limited capabilities- and also people on WebTV or IE4.

The CSS forum is a good resource for finding what browsers need what. Also a search for "box model" should net you info about the basic cross-browser problems. Google "CSS-only Filters" for what is perhaps the best compendium of hack approaches.