Where Is It Written That I Should Use CSS Positioning?

This argument has come up two or three times lately.

We have a web standards document at our company that say "Use valid
HTML 4; We don't recommend switching to DIV-based CSS-P for layout
just yet though, tables are a lot easier."

That's because we have a lot of developers who aren't ready to move to
CSS-P and DIVs just yet.

But I'm being told our policies were contradictory. If we're going to
use standards, then we should use CSS positioning not TABLE code.

But we _are_ using standards! We're using valid HTML with a DOCTYPE
and everything. We don't use the FONT tag (though even _that_ is still
valid in Transitional HTML, did you notice?) and all the formatting,
all the backgrounds and colors and images and fonts are in the style
sheet, not in the page.

What, after all, is the real difference between

-------- ------------------------ --------

TD | | TD | | TD |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
-------- ------------------------ --------

and

-------- ------------------------ --------

DIV | | DIV | | DIV |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
-------- ------------------------ --------

anyway? The content comes in the same order in the page, and if I
include a "skip to content" link that takes people to the centre TD,
who have I hurt?

Tables should only be used for Tabular content, I hear you say --
well, isn't the traditional layout tabular, in a way? A column of nav,
a column of content, a column of whatever on the right. They're in
three different categories. Are tables really only to be used for
statistics on the consumption of cabbage in East Berlin from 1993 to
1994?

I forgot my original question -- oh yeah, where is it written,
actually literally where in the W3 website or the spec is it written
that I must use CSS-P now or my code isn't using standards?

Because the woman who I was arguing with eventually just said "well,
you're going against the SPIRIT of it" and I said "I don't have a
Spirit Validator, just an HTML Validator".

Joking aside, what document _should_ my opponent have pointed me to -
where is "Thou Shalt Use CSS-P" written, who decreed it - or is it
just a cultural assumption made by modern web developers, a sibboleth?

"Jack Hughes" <jac_hughes (AT) yahoo (DOT) com> schrieb im Newsbeitrag
news:f403fd42.0406142052.5371a2e (AT) posting (DOT) google.com...

This argument has come up two or three times lately.

[...]

I forgot my original question -- oh yeah, where is it written,
actually literally where in the W3 website or the spec is it written
that I must use CSS-P now or my code isn't using standards?

Äh - if you know the arguments, why do you ask again? You are free to use
whatever coding technique you feel comfortable with. You don't need the ok
of ciwah/ciwas regulars, do you?

This is neither about a "must" nor about religion, it is just essential to
know how things are intended to be by the people who developed them, and it
is great to know good arguments for and also against doing thins this or
that way. It just makes you free to decide which way you go and also it
gives you the ability to discuss this with your bosses, clients and
co-workers. So knowing about those issues makes you a professional. But it
is not necessary that you agree with all that is written here nor is it
necessary that anybody else agrees with your point of view.

--
Markus

jac_hughes (AT) yahoo (DOT) com (Jack Hughes) wrote in message news:<f403fd42.0406142052.5371a2e (AT) posting (DOT) google.com>...

where is "Thou Shalt Use CSS-P" written

c.i.w.a.h

By a bunch of pinheads who only have the brains for one bandwagon, so
when they've jumped onto it, they can't accept any value in any other
way of doing it.

Understand what you're doing. Then make appropriate choices.

Blanket application of CSS everywhere is probably slightly better than
an equally consistent use of 1x1.gif, but neither is as good as doing
the right things, as circumstance demands.

Three column layout in CSS sucks, because float is dubious and so is
width or margin:auto. Go for the three column table, because it's
good, it's simple and it works. OTOH, a 5 column table because you
don't understand margins or padding isn't good.

If you work on authoring for mobile devices, you'll start to really
see benefits from dumping table-bloat.




We sometimes forget just how clued-up the readers of c.i.w.a.h are -
even the idiots. You'll be flamed hereabouts for the most trivial of
errors, yet out in the big world of corporate site building the level
of technical expertise and practice is still pitiful. I've got a
problem at the moment where I feed content form <corporate #1> to
<corporate #2> and they're cheefully stripping ampersand entities and
all sorts from the content, then wondering why I complain that it's no
longer valid HTML - "But it looks OK in my browser" they whine.

"Jack Hughes" <jac_hughes (AT) yahoo (DOT) com> wrote

What, after all, is the real difference between

-------- ------------------------ --------
| TD | | TD | | TD |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
-------- ------------------------ --------

and

-------- ------------------------ --------
| DIV | | DIV | | DIV |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
-------- ------------------------ --------

Actually, the comparison is

<table>
<tr>
<td></td><td></td><td></td>
</tr>
</table>

and

<div></div><div></div><div></div>

And when you get down to it, I'm 100% positive that your table is much more
complicated than that whereas the <div> based layout is not.

Making The Business Case For Web Standards
http://www.karlcore.com/articles/article.php?id=23

Karl

Jack Hughes wrote:

This argument has come up two or three times lately.
[snip]
I forgot my original question -- oh yeah, where is it written,
actually literally where in the W3 website or the spec is it written
that I must use CSS-P now or my code isn't using standards?
[snip]
Joking aside, what document _should_ my opponent have pointed me to -
where is "Thou Shalt Use CSS-P" written, who decreed it - or is it
just a cultural assumption made by modern web developers, a sibboleth?

The short answer to your question is "nowhere important". I believe that the
objectives are getting forgotten.

When designing "infrastructure", such as an operating system, or application
middleware, or the set of recommendations for the web, you had better design
it so that people using it can separate out lots of concerns. It is a good
idea to have a web where authors, and users, can handle different issues, in
different places, with different recommendations & technologies.

But that it not a requirement that those people actually *use* all those
different things in that way. That is up to them, or the people they are
answerable to. Or perhaps the law influences the decision.

The purpose of a web site is to communicate with the audience. The techniques
used must be evaluated against that purpose. Do layout tables hinder the
communication, perhaps because of the user's technology? Or do they help, by
enabling the author to build an effective site faster? Do layout tables make
the pages inefficient? Will they prevent important change needed for future
communication? These questions can be answered.

Experts should be able to assist with the analysis. A problem is that some
people opposed to layout tables appear to believe their own propaganda! Here
are some example:

"Layout tables make pages bloated & inefficient". Do the sums. They add
perhaps about 25 bytes per item being positioned. So, using them to achieve 3
columns may add about 75 bytes to the page. (*Bad* layout tables can be
dreadful! So can bad anything).

"Layout tables make your pages inaccessible". The Web Accessibility Initiative
came to a different conclusion in April 1999, and this is no longer a useful
assumption. (The key is whether they linearise well. In fact, the
linearisation of tableless pages is also important).

"Layout table freeze your layout as it is". I've seen it said that if you use
a layout table to put your site navigation on the right, you are stuck with it
on the right. But here is a page that uses a simple layout table to put the
site navigation table on the right:
http://www.childsupportanalysis.co.uk/
And here is that page, with the same table, and just 2 additional CSS rules
(embedded in the <head>). They put the site navigation on the left. No tricks,
no script, just valid HTML 4.01 Strict & CSS2:
http://www.childsupportanalysis.co.uk/reversed.htm

A better approach to this topic would be to be more objective, to help authors
answer their questions. If an author decides to go ahead with a layout table,
then how can the author use a good layout table, not a bad one? (You are
unlikely to be able to change the page layout significantly if you start with
a bad layout table).

It's only mark-up. It isn't sin!

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Jack Hughes wrote:

This argument has come up two or three times lately.

We have a web standards document at our company that say "Use valid
HTML 4; We don't recommend switching to DIV-based CSS-P for layout
just yet though, tables are a lot easier."

If your content actually *is* a table, as in something you could caption as
"Table 1" in a book, then yes, keep it in a table. Otherwise, it's abuse of
table markup.

That's because we have a lot of developers who aren't ready to move to
CSS-P and DIVs just yet.

But I'm being told our policies were contradictory. If we're going to
use standards, then we should use CSS positioning not TABLE code.

That's correct.

But we _are_ using standards! We're using valid HTML with a DOCTYPE
and everything. We don't use the FONT tag (though even _that_ is still
valid in Transitional HTML, did you notice?) and all the formatting,
all the backgrounds and colors and images and fonts are in the style
sheet, not in the page.

Misusing <table> for a layout grid is just as unacceptable as misusing
<blockquote> as an "indent text command".

What, after all, is the real difference between

-------- ------------------------ --------
| TD | | TD | | TD |
[snip]
and

-------- ------------------------ --------
| DIV | | DIV | | DIV |
[snip]
anyway? The content comes in the same order in the page, and if I
include a "skip to content" link that takes people to the centre TD,
who have I hurt?

The former is structurally inaccurate. Some browsing situations may also
need to handle tables differently from running text and text enclosed in
<div>. Your layout box disguised as <table> may well be treated like an
actual data table, even if you do not intend that.

Tables should only be used for Tabular content, I hear you say --
well, isn't the traditional layout tabular, in a way?

No, the structure of content doesn't change just because you want the page
layout to be a certain way.

I forgot my original question -- oh yeah, where is it written, actually
literally where in the W3 website or the spec is it written that I must
use CSS-P now or my code isn't using standards?

http://www.w3.org/TR/html401/struct/tables.html#h-11.1

"Tables should not be used purely as a means to layout document content as
this may present problems when rendering to non-visual media. Additionally,
when used with graphics, these tables may force users to scroll
horizontally to view a table designed on a system with a larger display. To
minimize these problems, authors should use style sheets to control layout
rather than tables."

(The word "control" probably should have been "suggest" here.)

--
Shawn K. Quinn

On Tue, 15 Jun 2004, Shawn K. Quinn wrote:

(The word "control" probably should have been "suggest" here.)

"Propose" is perhaps a more neutral - and hence more generally
acceptable - term for it.

Anyway, why all this fuss about "positioning"? For most purposes, a
bit of flexible sizing and judicious floating works well across a
range of browsers, and does little harm irrespective of whether it's
actioned or not.

Some of the attempts I've seen to position lumps of stuff out of the
flow, however, have failed miserably in real-world situations - all
too often resulting in substantive content getting hidden behind some
insignificant navigation menu or similar. In web page design, often
enough, "less can be more" if the right choices are made. No, I'm not
a graphic designer, don't look to me for demonstrations, but I know
what I've seen.

On 14 Jun 2004 21:52:02 -0700, Jack Hughes <jac_hughes (AT) yahoo (DOT) com> wrote:

The content comes in the same order in the page

Actually, no. With table layout I must have the left column, then the
center, then the right. With CSS layout I can make the page degrade to ANY
order.

Neal wrote:

On 14 Jun 2004 21:52:02 -0700, Jack Hughes <jac_hughes (AT) yahoo (DOT) com
wrote:
The content comes in the same order in the page

Actually, no. With table layout I must have the left column, then the
center, then the right. With CSS layout I can make the page degrade
to ANY order.

Not true (about the tables). There are various ways, for example using CSS2,
or the "table trick", of having content order different from visual order.

And with CSS layout, things can sometimes get restricted. For example, if I
want a footer below the rest of the content, I would typically use floats, not
absolute positioning. And then I have to put things into the content in the
right order to get the floats to work. (This is especially a problem if one of
the columns is "remaining-width", because of a flexible-width layout, and
can't be floated).

With both techniques, once the content gets at all complicated, the wrapping &
nesting & sequencing of the top-level elements of the document tree become
important. In that sense, a table is "stereotyped wrapping & nesting".

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

*Neal* <neal413 (AT) yahoo (DOT) com>:

On 14 Jun 2004 21:52:02 -0700, Jack Hughes <jac_hughes (AT) yahoo (DOT) com> wrote:

The content comes in the same order in the page

Actually, no. With table layout I must have the left column, then the
center, then the right. With CSS layout I can make the page degrade to ANY
order.

That point is void, because you can also use

table#layout,
table#layout>*, table#layout>tr>*, /* line can be left out if not XHTML */
table#layout>*>tr, table#layout>*>tr>* {
display: block;
}

in combination with any CSS you would apply to 'div's or other, more
appropriate elements.

Especially for media="handheld" something based on this can make a lot of
sense, despite the table being abused for layout or not.

--
»Das Schwierige am Diskutieren ist nicht, den eigenen Standpunkt zu verteidigen,
sondern ihn zu kennen.«
Andre Maurois