divs And spans in Standards Mode - Tell Me it Ain't So...

[davesuemcbride]

Hi All,

I built a great looking page to learn CSS, using div's for 'rows' and
span's for 'columns' - nice complex layout where I could create just
about anything by endlessly nesting them as required, and all without
tables to boot.

You can probably guess the rest - ran it in standards mode and it looks
like cr*p... The span's width style attributes seem to be ignored and
everything just reverts to one long column. Tried changing span's to
div's w/display:inline, but same result.

I assume that quirks mode allows this type of layout, where standards
mode doesn't - what exactly was the quirk? Am I missing something
obvious? Is this why both my evangelical CSS books bust out the table
tags on anything non-trivial? Is it possible to create vertically
flowing but horizontally fixed layouts without resorting to tables?

TIA,
David M

[Pawel Knapik]

<da************@yahoo.com> wrote:

Hi All,

I built a great looking page to learn CSS, using div's for 'rows' and
span's for 'columns' - nice complex layout where I could create just
about anything by endlessly nesting them as required, and all without
tables to boot.
This is your first mistake - you still think with tables, but use <div />
instead of <td />
Read about html document semantic.
You can probably guess the rest - ran it in standards mode and it looks
like cr*p... The span's width style attributes seem to be ignored and
everything just reverts to one long column. Tried changing span's to
div's w/display:inline, but same result.
I assume that quirks mode allows this type of layout, where standards
mode doesn't - what exactly was the quirk? Am I missing something
obvious?
Yes, you are.
http://www.w3.org/TR/CSS21/visudet.html#q4
http://www.w3.org/TR/CSS21/visudet.h...e-non-replaced
Is this why both my evangelical CSS books bust out the table
tags on anything non-trivial? Is it possible to create vertically
flowing but horizontally fixed layouts without resorting to tables?

It is possible, there are loads of tutorials, articles and examplesaround
the web.
you can start here:
http://css-discuss.incutio.com/?page=CssLayouts

[Timo]

Dave,
There is nothing wrong with tables when one is trying to present a matrix of
data that are most meaningfully presented in grid format. Do not confuse
matrix layout with page layout.
Timo

"Pawel Knapik" <pa**********@gmail.com> wrote in message
news:d0**********@achot.icm.edu.pl...

<da************@yahoo.com> wrote:

Hi All,

I built a great looking page to learn CSS, using div's for 'rows' and
span's for 'columns' - nice complex layout where I could create just
about anything by endlessly nesting them as required, and all without
tables to boot.

This is your first mistake - you still think with tables, but use <div />
instead of <td />
Read about html document semantic.

You can probably guess the rest - ran it in standards mode and it looks
like cr*p... The span's width style attributes seem to be ignored and
everything just reverts to one long column. Tried changing span's to
div's w/display:inline, but same result.
I assume that quirks mode allows this type of layout, where standards
mode doesn't - what exactly was the quirk? Am I missing something
obvious?

Yes, you are.
http://www.w3.org/TR/CSS21/visudet.html#q4
http://www.w3.org/TR/CSS21/visudet.h...e-non-replaced

Is this why both my evangelical CSS books bust out the table
tags on anything non-trivial? Is it possible to create vertically
flowing but horizontally fixed layouts without resorting to tables?

It is possible, there are loads of tutorials, articles and examplesaround
the web.
you can start here:
http://css-discuss.incutio.com/?page=CssLayouts

[Stan Brown]

"" wrote in comp.infosystems.www.authoring.stylesheets:

You can probably guess the rest - ran it in standards mode and it looks
like cr*p... The span's width style attributes seem to be ignored

"This property does not apply to non-replaced inline-level
elements."[1] (Basically IMG and OBJECT are replaced elements, and
the other inline elements like SPAN are non-replaced.)

[1] http://www.w3.org/TR/CSS21/visudet.html#propdef-width

--

Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/

[phil_gg04]

> The span's width style attributes seem to be ignored

Yes, you can't have a width on a span. I don't know why.
display:inline-block is probably the "right" way around this, but it
isn't widely supported.

--Phil.

[Stan Brown]

"" wrote in comp.infosystems.www.authoring.stylesheets:

The span's width style attributes seem to be ignored

Yes, you can't have a width on a span. I don't know why.
display:inline-block is probably the "right" way around this, but it
isn't widely supported.

"What's this about attributing properly?"
http://www.xs4all.nl/%7ewijnands/nnq/nquote.html#Q6

Rather than inline-block, I would think a series of floats would
make the most sense, particularly if they're all supposed to have
the same width.

But, as someone else noted, if the data are being presented in
columns because the items have logical relation to each other, then
<table> markup would seem entirely appropriate.

One of the shibboleths in CSS seems to be that one _must_ replace
tables with CSS. While that's usually true when tables are used
strictly for layout,(*) it's false when a table shows relationships
between columns or rows or both.

(*) I feel guilty that my own site map is table based, and so are
many tables of contents on my pages. I'm going to fix that Real
Soon Now.

--

Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/