Out-of-date CSS person needs up-to-date CSS advice!!

[Alan Silver]

Hello,

I shamefully admit to be an old web designer, from before the days of
CSS. In those heady days, tables were king and were used for every
possible kind of alignment. When CSS came along, it was useful for
specifying colours and fonts for a site in one central location, but
useless for any real kind of design work due to the poor browser
support. I got well in to using CSS for colours and fonts, but carried
on using tables for layout.

I recently came across www.csszengarden.com and was totally amazed that
you could do such things with CSS alone. I am completely rethinking my
approach to page layout, but need some help. I have looked at the CSS
there, and at a fair few other sites I have found since, but haven't yet
got the picture completely clear.

So, any suggestions for some background material that will bring me up
to date? I have trawled around Amazon and found three books that look
interesting, the CSS Zen Garden one, "More Eric Meyer on CSS" and
"Cascading Style Sheets the Definitive Guide" (also by Eric Meyer).

Any comments on this choice of books? Remember, I do have a good
understanding of basic CSS, so I don't need anything for a complete
beginner, but I am obviously missing quite a lot of the picture, so I
need something for, erm, a complete beginner!!

Also, are there any on-line resources that I can use? I prefer books as
it's easier to read on paper, but I would also like to see some on-line
material.

Finally, how good is modern browser support for CSS? I only looked at
those sites in IE6, I don't bother in other browsers (although I'm sure
they were fine). Is CSS still a major challenge of working your way
around browser deficiencies?

Thanks for any comments.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Darin McGrew]

I wrote:

In the real world, content images should use the IMG element.
Content images that are pictures of text should provide the text in
the ALT attribute.

Alan J. Flavell <fl*****@ph.gla .ac.uk> wrote: Well, yes; but, on the other hand, there's a body of informed advice
which says that making images that are nothing more than images of
text is poor practice. Better would be to include the text itself in
the HTML with appropriate markup (and if you don't like the visual
result, to propose something via the stylesheet to modify the visual
result in appropriate presentation situation/s).

Yes, the ideal is to use real text, and to style it with CSS.

But image-replacement hacks aren't styling real text with CSS; they're
hiding the real text and replacing it with an image of text.

If these hacks were styling the real text, then users could select the
styled text and copy-paste it somewhere. Or I could add another H3 element
to the CSS Zen Garden boilerplate HTML, without having the new H3 element
look different from all the original H3 elements that are otherwise similar
to my new one. Or I could edit the text of an H3 element without mucking
with the style sheet or its images.

IMHO, if you're going to replace the real text with an image, then you
should be honest about it and use an inline image with appropriate ALT
text. But the artificial requirements of the CSS Zen Garden project
prohibit that.
--
Darin McGrew, mc****@stanford alumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp. com, http://www.HTMLHelp.com/

"The early bird gets the worm, but the second mouse gets the cheese."

[Christoph Päper]

Alan J. Flavell:

On Mon, 15 Aug 2005, Darin McGrew wrote (...):

In the real world, content images should use the IMG element.
Sure.
Content images that are pictures of text should provide the text in
the ALT attribute.

Sure.
Well, yes; but, on the other hand, there's a body of informed advice
which says that making images that are nothing more than images of
text is poor practice.
Sure, but 'img' + 'alt' is still a much better, i.e. accessible,
practice than any of the CSS IR techniques. If the alternative text is
displayed it is just as stylable as all the other, normal text, which is
element content instead of attribute content. At least it should
be---some browsers might disagree.
Better would be to include the text itself in
the HTML with appropriate markup (and if you don't like the visual
result, to propose something via the stylesheet to modify the visual
result in appropriate presentation situation/s).

Exactly. Most people (ab)use CSS this IRy way, because of lacking CSS
features or, more commonly, suboptimal CSS support in browsers. The
latter includes downloadable fonts, which currently only IE supports,
but only in a proprietary format (EOT), in which site-specific files
have to be generated by a Windows-only tool (WEFT) out of TTF files
which allow embedding (or more).

[Matt Silberstein]

On Sun, 14 Aug 2005 14:55:16 +0000 (UTC), in
comp.infosystem s.www.authoring.stylesheets , Darin McGrew
<mc****@stanfor dalumni.org> in <dd**********@b lue.rahul.net> wrote:

Alan Silver <[e-mail] x> wrote:

I recently came across www.csszengarden.com and was totally amazed
that you could do such things with CSS alone.
Alan J. Flavell <fl*****@ph.gla .ac.uk> wrote: Yes, it's a spectacular demonstration of what can be achieved, indeed;
but under no circumstances to be used as an actual model of how to
design normal web pages.

Alan Silver <[e-mail] x> wrote:

Why not?

For one thing, many of the designs are brittle, and fail in browsing
environments that differ from what the CSS author expected. For example,
try enforcing a minimum font size, using a narrow browser window, enforcing
a narrow browser window, or turning off image-loading when CSS is enabled.

For another, many of the techniques common to the CSS Zen Garden designs
(e.g., replacing text with images of text) are used not because they are
good techniques for real-world projects, but because the CSS Zen Garden
imposes artificial constraints.

Of course it does. It is not a "real world" problem, but a opportunity
to show off clever solutions to a variety of problems. I would not
code from Zen Garden, but I do look to it for a variety of interesting
solutions and results. Obviously if you can change both the HTML and
the CSS you can get more elegant results.
--
Matt Silberstein
And now our bodies are oh so close and tight
It never felt so good, it never felt so right
And we're glowing like the metal on the edge of a knife
C'mon! Hold on tight!
C'mon! Hold on tight!

Though it's cold and lonley in the deep dark night
I can see paradise by the dashboard light
Paradise by the dashboard light

Jim Steinman