Hi all

I have to ask - why is it preferred to code websites using XHTML and CSS for
layout/positioning? Seemingly, few browsers have 0 problems with CSS,
whereas with HTML 4.01, every single browser used by the mainstream (on
windows/mac/linux) has practically identical rendering with table-based
layout?

If your average 1997 PC could render webpages just as complicated as the
ones we have today, it clearly isn't a matter of processing power, as
computers are getting faster.

I'm not looking for a fight with any zealots from any of the various camps,
I just want to know the logical reasoning behind the move. (hint: "it's
just better" is not an answer :-P)

thanks for your time

dave

On Wed, 15 Mar 2006, d wrote:

I have to ask - why did some misguided folks with short-term aims, a
decade or so back, pollute what was supposed to be a structural markup
language, with ridiculously detailed rendering instructions - that
could only be implemented in a subset of display situations? Surely
that's the job of a stylesheet?

d wrote:

It isn't.

A lot of people jumped on the XHTML bandwagon when it was new and
shiny. Many of those people have now realised what a mistake that was.
XHTML is not well supported by many current browsers, and in
particular, is very badly supported by IE6.

What is becoming increasingly popular, and with good cause, is using
HTML 4.01 Strict to write the document, with CSS to define the
presentation and layout.

There are several advantages to using HTML+CSS rather than embedding
all the layout and presentation in the HTML, usually by using tables.

1. Pages can be made much smaller, which means they transmit and load
much quicker, as well as consuming less bandwidth. The presentational
elements of a table-based layout page massively increase the size of
the document, and dramatically slow down the appearance of the page on
screen.

2. Different presentations and layouts can be served to people in
different browsing environments. So for people browsing on small-
screen devices such as mobile phones, you can give a different layout
that suits a 240px wide screen. For people printing a document, you
can hide the navigation elements. And so on.

3. If you use tables for layout, this means that the normal route
through the document will be non-sequential. In other words, if you
read through the source code from top to bottom, you probably won't be
reading the document contents in a logical order. This can be a real
problem for people browsing in non-graphical environments - most
notably for those on WAP, or using text-to-speech or Braille readers.

4. CSS allows people to disable the presentation and layout elements
of the document and fall back on either the browser defaults or their
own chosen stylesheet. This is very useful for people with, eg, a
limited field of vision, colourblindness or any other form of reduced
visual acuity. It also allows people to override bad decisions made by
web authors - there are three websites I use regularly that I can only
comfortably read with CSS turned off, despite having perfect vision.

5. A table-based layout often doesn't work well if you want to change
the size of text, or the size of your window. It can do, but more
usually doesn't. CSS, if written properly, can overcome these problems
and accommodate almost any window or text size without looking awkward
or out of place.

6. It makes your life much easier as an author. It is much easier to
change either the content or the presentation/layout of a page written
in HTML+CSS rather than table-based layout. It also makes your page
much easier to follow or debug for you or anyone else, if you ever
pass on responsibility for the site to someone else.

The idea behind the web is that it can transmit documents that can be
read on a wide variety of media. Pixel perfect presentation was never
intended. If you need that sort of precision, consider using PDF - but
first, consider why you need pixel perfect precision.

I have, on a number of occasions, seen requests by authors along the
lines of "Why does this look different in Firefox to IE6?" - and when
it comes down to it, both versions of the site look just as
professional and work just as well ... but one has thicker lines, or
more spacing, or a slightly different size of text. Trivial cosmetic
differences that have no effect on the usability of the site nor on
the impression it conveys.

If a site looks marginally different in different browsers, that is
_not a problem_, as long as it works well and looks fine in all of
them. Table-based layouts have as many pitfalls, bugs and glitches as
CSS layouts do, and are just as likely to go wrong.

--
Stevie D
\\\\\ ///// Bringing dating agencies to the
\\\\\\\__X__/////// common hedgehog since 2001 - "HedgeHugs"
___\\\\\\\'/ \'///////_____________________________________________

Stevie D <stevie@sjd117.freeserve.co.uk> wrote:

[snip]

And imagine this ease multiplied many times when dealing with a whole
site or portion of a site when even a minor change to the look and feel
of those pages is required.

Axel

"Alan J. Flavell" <flavell@physics.gla.ac.uk> wrote in message
news:Pine.LNX.4.62.0603151758590.18598@ppepc56.ph. gla.ac.uk...
But surely that thinking is verging on the ideological... websites are meant
to be viewed, after all...

On Thu, 16 Mar 2006, d wrote:

If you can't find them, you won't view them. So there's a sense in
which web sites are *primarily* meant to be indexed.

I'm only half joking.

"Stevie D" <stevie@sjd117.freeserve.co.uk> wrote in message
news:jbng12l6koiq1vtbnhh3f9ia4c40vuirhq@4ax.com...
Please forgive me if I seem argumentative here - I'm really not, I'm just
asking questions

Indeed!

What if you use gzip? All those <tr>s and <td>s would compress nicely.
Unzipping a few KB of text doesn't visibly hurt rendering. As for tables
being slow, I've not noticed a speed improvement when converting sites from
table-based layouts to CSS-based (but maybe that was just what I was working
on).

That's one of the most important aspects of CSS that I've seen so far.

Most of the sites I've worked on have no intention of working on
non-mainstream browsers. It doesn't make much sense to position a flash
movie in such a way to ensure its positioning is correct for a Braille
reader Again, I suppose that's just what I've worked on.

That I can understand completely - again, a very strong argument for its
use.

I've got quite a few years of table-based HTMLing, and I've not found
anything I can't do with them, especially with regards to resizing. Nothing
looking awkward, proportional font sizes, etc.

I can understand that, but I really don't have to change the HTML that I
write too often. Plus, I use templates so the HTML code I manage is in nice
chunks anyway.

I need pixel-perfect layout when mixing different kinds of elements - text,
flash, images, etc. Marketing types are very demanding with their layout,
and the thickness of a line might make the design outside of the design
style of that particular company. Pushing HTML to its limits by integrating
these various forms of content in pixel-perfect fashion is quite the rage of
design/media agencies, where every single aspect of a site's presentation is
analyzed by seventeen tiers of marketing guys and lawyers.

I've found that it's very, very easy to code a pixel-perfect site in 4.01
strict that works across all major browsers. CSS, on the other hand, has
many bugs which, again, from my experience, has required about 20% HTML,
50% CSS, and 30% hacks to get the HTML and CSS working together on the
various platforms, and/or overcoming bugs present in some of the most common
*cough* IE *cough* browsers.

Again, I must stress I'm not being argumentative, I just want to hear the
opinion of a seasoned professional.

cheers!

dave

Message-ID: <gM2Sf.36705$wl.28329@text.news.blueyonder.co.uk > from d
contained the following:

OK folks. Portfolio time. <g>

--
Geoff Berrow 0110001001101100010000000110
001101101011011001000110111101100111001011
100110001101101111001011100111010101101011

d wrote:

Isn't this the point that someone points to http://www.csszengarden.com/ ?

Before I start - I will apologise. I think when I wrote my previous
reply, I was conflating the arguments for using CSS for layout with
CSS for presentation. The stuff about replacing <font> tags was, when
I read it back, clearly not appropriate.

d wrote:

Because of the way many browsers draw tables, you may see nothing
until the page is fully loaded, or you may see the page laid out in a
very odd way as it loads each new row and cell. With HTML+CSS, you
will see the page laid out in a linear fashion, growing as it loads
progressively, until the CSS loads, and then it snaps into shape.

I don't know if it just affects IE or all browsers, but each nested
table increases the draw time by square - ie, one table nested inside
another takes four times as long as a single table - three levels of
nested table takes nine times as long. Sometimes you can get away with
just a single table diced up small, but for more complicated things
you might go down the nested route - especially if you then need a
data table on your page - this _will_ slow down the appearance of the
page on screen.

That says more about the sites you've worked on than a general rule!

The sites that I've worked on - and most of the sites I use - have
been primarily functional. Their aim is to transmit information. In
some cases, it is to make a sale ... but then I'm looking at sites
like Amazon or buying travel tickets - rather than sites that are
trying to convince me to buy something (which never do!).

In all of these cases, what is important is the message. That means
that you need to make it available to non-mainstream browsers. It
isn't difficult - write semantic HTML and it _will_ work in other
environments.

No, it doesn't make sense to position a Flash movie for a Braille
reader, but it does make sense to offer a textual equivalent to the
Flash movie.

But when you do need to change it, it will take a long time. Not
necessarily because it's complex - a simple table-based layout that is
written with lots of white space and maybe even comments could be very
easy to follow - but you will have to change every single damn page
.... not good!

If you haven't already, have a look at http://csszengarden.com/ - a
site that has the bare bones in HTML, and the presentation in CSS.
Hundreds of people have written their own CSS files for it, and you'd
hardly guess it's the same basic site each time. Yes, some of them are
highly graphical and rely on lots of images throughout - but many of
them don't.

You can change the look of your _entire_ website just by re-writing
that one page. I'm not talking about just colours and fonts - you can
move entire sections around. Move the navigation from the top to down
the left. Move the local navigation from the right to the left, below
the primary. Move the footnotes from the bottom to the right. On every
page on your site - just by changing one page.

Of course, you have to set it up right in the first place. I am trying
to face re-writing one of my websites to full CSS from the frames base
it has used for the last six years, and it is going to take whole
days, maybe even weeks. And that's without changing the look of it.
But when I've done that, updating the style will be so much easier.

I guess that's why I would never work for a style-over-substance
design agency. The thickness of a line is _not_ that important. Get
over it (them, not you). People - ie, the people looking at the
website on the computers, at home and at work, don't give a toss about
the thickness of the line. They want to use the site to find the
information, make their purchase, and clear off. Half of them wouldn't
notice if you changed from Verdana to Comic Bloody Sans on alternate
pages. The _only_ people that worry about the thickness of that line
are the marketers - _no-one else_.

Opera Mobile is becoming a mainstream browser. Canon, Epson and
Hewlett Packard do, in a way, make mainstream "browsers". I very much
doubt that your sites work well on these.

We hope that with the coming of IE7, there will be a dramatic
reduction in the need for hacks as the use of IE6 tails off.

Table-based HTML needs hacks too. The difference is that these are
more widely known and better documented than CSS hacks are at the
moment. As you become more familiar with CSS, what currently seems
like an interminable time hacking will very quickly become second
nature and you won't even have to think about how to achieve that
layout.

--
Stevie D
\\\\\ ///// Bringing dating agencies to the
\\\\\\\__X__/////// common hedgehog since 2001 - "HedgeHugs"
___\\\\\\\'/ \'///////_____________________________________________