Debate: CSS positioning or tables in the real world?

[Marc]

Don't get me wrong, I am all for standards. In a perfect world all browsers would have full support for css 2, and we wouldn't have any compatibility problems.

Unfortunately this is not a perfect world.

Here's the truth: I would not dare use css for positioning for a site I develop for a client, and I'm wondering how many people would. I feel that if all I care about is making the best website possible, one that will look nice on as many different systems as possible, I should be using tables for layout, not css.

What good is designing a site for a client with css if he uses netscape 4.2 and its going to look like crap (or just very plain) when he or she sees it? This is a very real problem I still have. Most people have no idea what a new browser will do for them, and a lot of people use machines they have no control over, and as a result, it is still a major consideration for me to make my site layouts very compatible.

Sure it is a little awkward, but I have dedicated enough time so that I can code almost any layout using tables (and make it fit nicely in all resolutions), and I think this is a valuable skill that I should hold on to for the time being instead of switching fully over to css just yet.

Am I wrong? Is it still better to use css for positioning elements instead of tables even though you are restricting your audience by doing this?

[redux]

i pretty much agree with everything you said. it's one thing being a standards zealot / idealist, and another to make pages in the real world where your users (and, yes you're right, your CLIENTS) see them with non standards compliant browsers.
while we're on the subject, i still think the W3C should allow for a "layout table" type element (probably in the CSS, as it's presentational, not content specific)...but that's probably wishful thinking

[AlexW]

In the end it's mostly just retuning your bag of tricks. Over the years most of us have a quiver full of html fixes that we fire off to fix our table layouts so they work in all browsers. After a while we've used them so often they almost become invisible to us.

CSS layout technique is newer to most of us so it takes time and effort (and a bit of frustration, generally) to come up with the magic bullets to make those layouts work cross browser. True, if a Netscape4-centric client comes to us, (we have one now) we go straight to table layouts. We're not silly about it.

But, the reality is that isn't the norm for the majority of either our clients or their users.

For most projects now the advantages for working in pure CSS make the initial challenges well worth the effort.

[redux]

Originally posted by AlexW
But, the reality is that isn't the norm for the majority of either our clients or their users

that depends on who your client base is. mom&pop's corner shop and lou the plumber run NS4.7 on an old P100...
well, i started work as webmaster/developer at my old university, and i'm still stuck with tables as - even though they rolled out XP on most open access machines - they still wanted to install NS4.75 (i had a fit...XP and NS4.75...why not at least Mozilla ?)

[iTec]

i still think the W3C should allow for a "layout table" type element (probably in the CSS, as it's presentational, not content specific)...but that's probably wishful thinking

something like this?

[S7even]

What is the % of people with browsers that have good support for CSS positioning?

I created a test page using CSS positioning and i tried it with IE6 IE5 NS6.2 Mozilla1.1 and NS4.7. It looked good in all browsers except NS4.7(it was a "liquid" design).

I believe that you should draw the line somewhere. E.g. say that your designs should look good with the 90% or 95% of the browsers. If good CSS positioning support is bellow that line then continue to use tables for some more time.

[redux]

Originally posted by iTec

something like this?

ye gods, another stopgap solution. if they're doing multi-column, why not do multi-row as well ?

[Skunk]

I woudn't create a CSS layout for a client without talking it over with them first, but I see no reason not to use CSS layouts in "the real world". Netscape 4 is the only sticking point, and not only is it down to less than 2% now but with a simple @import rule (combined with structural markup, which anyone using CSS forlayout should be using as well) any CSS which could have potentially broken in Netscape will be hidden from that browser. Alternatively, a potentially better approach would be to serve a simple stylesheet to Netscape 4 with a normal <link> element and import the advanced styles with @import - that way NS4 at least gets some rudimentary styles (a background colour, some padding around the body and a nicer font than times new roman) but you can use CSS to its full potential for better browsers.

My rule of thumb is that the content of a site MUST be accessible (i.e readable) on all possible platforms. CSS allows me to do just that - good browsers get a funky design, bad browsers get the content. This is more than van be said for a huge number of table sites which work in NS4 but fall apart in lynx or screen reader software.

As far as I'm concerned, CSS is ready for main stream use.

[Skunk]

And of course, there's always the transitional option - use as few tables as possible for very basic layout, then use CSS to add padding and styles. That makes it much easier to get a site that works in NS4.

[S7even]

serve a simple stylesheet to Netscape 4 with a normal <link> element and import the advanced styles with @import

This can work in case that the default behavior is acceptable (e.g. not having the scroll-bars colored), but I don't see how this can help in the case of CSS Positioning.
E.g. If you use CSS Positioning to position an elememnt in the bottom-right corner, even if you hide this rule from NS4 it will still render the element in the wrong place breaking the whole layout.

The only "solution" for NS4 would be to create a version using tables and redirect there.

[webinista]

think of it this way: by *not* using css for positioning, you're also restricting your audience.

consider this: by using CSS, you make it possible for people using screen readers, PDAs, lynx and cell phones to use your site.

your pages are also lighter, which benefits modem users.

ns 4 users are rapidly dwindling. you still have some institutions holding-out, but in my experience, even they aren't netscape-only. you're affecting *maybe* 5% of the geneeral internet audience; possibly less for your particular site (tip: check the client's server logs). plus, as someone else said, @import means they can still use the site's *content.*

then there's the selfish reason: maintenance and redesign are MUCH easier and faster.

ultimately the decision will rest on what your client's web site users need, but don't be afraid to use CSS for fear of hurting netscape users. they'll live.

[Skunk]

Originally posted by S7even
This can work in case that the default behavior is acceptable (e.g. not having the scroll-bars colored), but I don't see how this can help in the case of CSS Positioning.
E.g. If you use CSS Positioning to position an elememnt in the bottom-right corner, even if you hide this rule from NS4 it will still render the element in the wrong place breaking the whole layout.

The question is, is the information on your site still accessible to Netscape 4 users? Your design may not be there (if you use CSS for layout and design and then hide the CSS completely NS4 users won't get any design at all) but as long as the content is still visible and readable does it really matter? Obviously the answer to that question depends on the site - if your site's content relies critically on the design you're best sticking to tables, but the majority of the sites (or at least the sites I visit) have their content in text that is just as useful without any design / layout at all.

Give this a go: Grab the bookmarklet from my blog entry here:

http://simon.incutio.com/archive/200...CSSBookmarklet

(Install it by dragging the link on to your links bar)

Now apply the bookmarklet to sites that use CSS layouts - my site does, but the most interesting effects can be seen on complex sites like www.wired.com

The bookmarklet "switches off" stylesheets for the current page. Essentially it shows you what the page would look like in a browser that doesn't support CSS (or has the CSS hidden for it, such as NS4 with the @import hack). While the sites don't look particularly pretty the content is all there and can be read easily.

Cheers,

Simon

[Marc]

Here's a statistic on what browsers people are using:
http://www.thecounter.com/stats/2002...er/browser.php

I wonder if that statistic isn't somehow a little off, though.. thecounter.com only gathers its statistics from sites where people copy and paste their html code onto their site, and I bet it's mostly a lot of little small personal sites where half the hits are from the webmaster and the other half from their online friends

I help teach a web publishing class at my high school, and the main teacher of the class is running netscape 4.7 on a macintosh!... and the kids in the class are forced to use apple machines running internet explorer 5.5.

I appreciate the argument that by not using CSS you restrict screen reader users and PDA's and all those things... but to be honest, it's a much bigger concern for me to have my site look nice in netscape than on a PDA or a cell phone.

Skunk: That link is cool, I've got it on my links bar and have been trying it out on lots of sites :P It's quite interesting.

webinista: I must say, I am a little afraid of hurting netscape users. A big client I am dealing with right now uses netscape 4.7, and I'm often worried something is going to look funky when he sees it. It would be awfully silly of me if I made the site using css and made it look nice in 90% of browsers, but all he sees is crap.

I'm still not convinced that CSS is ready for main stream use. Granted, it is probably around 10% or less of users that don't have proper support for css, but that 10% can be quite crucial.. If I can build a site with css and 90% of users will see it correctly, or I can build it using tables and 98% of users will see it correctly, I still don't see why you would opt for CSS (except selfish reasons).

Note: On any personal site of mine which is not business or profit related, I would have no problem using CSS for layout. I'm talking about when building sites for clients (getting paid for).

[AlexW]

I help teach a web publishing class at my high school, and the main teacher of the class is running netscape 4.7 on a macintosh!... and the kids in the class are forced to use apple machines running internet explorer 5.5.

I'm a little worried a guy leading kids in an ever-developing subject like the web is using 1998 technology that uses a poorly implemented 1996 standard (EG. Netscape4+ implements about 45% of the 1996 CSS1 standard if I remember rightly). It was all we had at the time, but unless you're institutionally-tied to it, there are really very few good reasons for not upgrading if you know how.

Everyone has a perfect and inalienable right to use the browser they choose. However, the reality is that the internet is a living system that develops everyday. As the months pass, we all adjust the way we build sites to cater for these tandem developments in Web standards, web browsers and web techniques. It costs everyone (designers, coders, clients and endusers) extra time, effort and money to make those designs perfom equally in older browsers. Users of older browsers are subject to the same economic forces as the rest of us, so as their market dwindles the chances of clients wanting to pay to support them gets smaller.

However, his kids (Mac IE5.5) should see CSS-P sites perfectly well.

I'm still not convinced that CSS is ready for main stream use. Granted, it is probably around 10% or less of users that don't have proper support for css, but that 10% can be quite crucial.. If I can build a site with css and 90% of users will see it correctly, or I can build it using tables and 98% of users will see it correctly, I still don't see why you would opt for CSS (except selfish reasons).

According to your own figures the Netscape 4 market is far less than 10%. There are lots or reasons for supporting that 98%, many of which have already been outlined above.

I can generally get a file size saving of between 30-40% per page by using CSS-P. The layout details are cached immediately when the stylesheet is downloaded so there's nothing but content left.

If I had used tables, 100 users need to download a 100k file even though 98 of them don't need it.

With CSS-P the first 98 people download a 65k file, while the other 2 either get an adjusted fatter file, or a slighly reduced visual layout.

You might be thinking 'Ah.. but who's worried about 35k?'. But when you are paying for bandwidth which bill do you want? 65 G/month or 100 G/Month?

The other great advantage to CSS-P is it's SEO advantages. Firstly the simple act of stripping tonnes of table data out of the code automatically increases keyword density.

Secondly, the flexibilty of the CSS postioning system allows you to place items like ads, navigation, subscription boxes, etc, towards the end of your code, even though they might render anywhere on the screen. This means that search engine bots that only read the first 'n' characters of your page, are reading your body content, rather than your navigation elements, admanager code, and other repeated page elements.

That's simply not possible with table layouts, where things at the top of the screen appear high in the code and things at the bottom appear at the end of the code.

[Marc]

Well the good news is the teacher is apparently getting a new laptop which will come equipped with some other, far less-outdated browser

That point about SEO is one I had forgotten..

True, in theory it stands to save money on bandwidth, but if this was true why wouldn't sites like yahoo.com take advantage of this? It probably stands to save them thousands of dollars or more. I think this is something Jakob Neilsen has criticized yahoo and the likes for..

Well I have to say now I am indeed intrigued... being an internet junkie anything "new" is appealing, so I think I now have to learn more about CSS-P and do some real testing in several browsers..

Am I correct in that IE 5 and 5.5 have good enough support for CSS-P?

Thanks.

[Jules]

Many of you are also forgetting that you can create N4 compatible layouts with CSS and enjoy the many benefits (mentioned above) of seperating content from format.

I've had great results by developing a site with three stylesheets:
1) The common styles such as fonts, colours and backgrounds
2) The positioning styles for new browsers
3) The positioning styles for Netscape 4

Here's a site that actually has a bunch of CSS layouts for N4

[AlexW]

Am I correct in that IE 5 and 5.5 have good enough support for CSS-P?

Absolutely.

Netscape 4 makes you work really hard and quite often swear more often that you generally prefer to. The others each have their little idiosyncracies (read bugs) that need to accounted for. A border that disappears here, a div that won't stretch far enough there. It's a different approach with new problems that take new tricks, but they are all solvable.

[Skunk]

IE 5 and 5.5 can both handle CSS layouts fine, but there are a few issues you need to be aware of. Firstly (and most importantly) these versions of IE suffer from the dreaded broken box model problem. Essentially, when IE5 sees a CSS width it interprets it as the width of a whole box (rather than the width of the middle bit of the box without padding/border/margin) and thus gets everything horribly wrong. Luckily there is a clever hack to get around this behaviour:

http://www.tantek.com/CSS/Examples/boxmodelhack.html

Secondly, IE5 screws up centering of divs. To center a block level element in CSS you set the left and right margins to "auto" - IE5 doesn't recognise this and leaves the box over on the left. You can get around this by applying text-align: center to the element containing the box, and then (very important this bit) applying text-align: left to the box itself (or all of its content will be centered).

[AlexW]

Actually, a good way to get a bit of a feel for CSS-P, particularly for 'visual thinkers' is to play around with the demo for Layout Master

Technically DreamWeaver can probably do all the same things but CSS-P layouts is all this thing does, so it's easy to get your head around it. You'll have to 'tune' the layouts for multiple browsers but it's a nice starting place nevertheless.

[webinista]

Originally posted by Marc

webinista: I must say, I am a little afraid of hurting netscape users. A big client I am dealing with right now uses netscape 4.7, and I'm often worried something is going to look funky when he sees it. It would be awfully silly of me if I made the site using css and made it look nice in 90% of browsers, but all he sees is crap.

as i said, whether or not to use CSS *ultimately* depend on your client's wants and needs, and whether your client's audience (which should be their main concern) will be able to use it.

however, it's silly to dismiss CSS as "not ready for the mainstream" when 90%+ of users have browsers that support it), and that percentage may be higher for particular sites (for my company, it's more like 95%).

and CSS offers two other added advantages that may be of particular concern to your client:

1. you can make a site more accessible to users with disabilities and alternative devices (several lawsuits have been settled regarding accessible web sites. i know of another pending, and one that has been dismissed.);

2. you can make a site whose content is available even to Netscape 2.0 and Lynx users (i've tested it).

[jofa]

Originally posted by Skunk
... good browsers get a funky design, bad browsers get the content.

The best summary of the subject that I have read - this week

[Zoef]

This is the kind of stuff I come to Sitepoint for, thanks fellas!

Haven't really got anything to add to what has been said allready. Just a special thank you to Skunk for that link... an eye opener!

[Marc]

Since I've now had to learn more about positioning with css, here's a great article I came across (thanks to this article on SitePoint):
http://www.brainjar.com/css/positioning

[Mincer]

I have one small point to toss into the mix.

If we're to develop to web standards and use strict xhtml along with stylesheets, what should we do about the css for different browsers? If there is a large emphasis on correctness in the xhtml, should we use the box-model workaround for IE5 in the css? Surely this breaks the rules for css correctness? Is this any better than using a table for layout?

/2p

Matt.
(latest site in xhtml/css2 )

[jofa]

Detect browser and use different style sheets? Yes
Use "smart" hacks and workarounds (==non-valid css)? No