HR as a graphic image

[Charax]

Is it possible to use CSS to define <hr> as a graphic image?

FrontPage 2003 has apparently dropped the graphic hr from their themes and I
am becoming more involved in using CSS, but would like to retain the
automatic inclusion of a graphic in place of hr.

I have a 300 px graphic I'd like to continue using, without a manual search
and replace of <hr> on 300 web pages....

Thanks,

Chris Hopkins
www.parthia.com

[Jukka K. Korpela]

"Charax" <ch******@ameritech.net> wrote:

Is it possible to use CSS to define <hr> as a graphic image?
Strictly speaking not, since you cannot add image content using CSS,
but you can specify a background image.
I have a 300 px graphic I'd like to continue using, without a
manual search and replace of <hr> on 300 web pages....

I wonder what you have been using (in terms of HTML and CSS, i.e. what
FrontPage has inserted for you), but the following would seem
reasonable:

hr { display: block;
width: 300px;
height: 10px;
background: url(deco.gif); }

Replace 10px by the height of your image.

This however leaves a border around the image on IE. I don't know why -
and setting border: none doesn't remove it.

This reminded me of Alan Flavell's "CSS1 and the Decorative HR",
http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html
which explains how complicated the issue is.

Personally I think using something like
<div><img alt="End of section." src="deco.gif"></div>
is a feasible alternative to using <hr> and then trying to style it
into an image. After all, <hr> itself is at least half-presentational,
and we generally use <img> to add purely decorative images. (Writing
adequate alt attributes is more important than being theoretically
puristic about not using "presentational tags".)

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Stan Brown]

In article <bs************@ID-177935.news.uni-berlin.de> in
comp.infosystems.www.authoring.stylesheets, Charax wrote:

Is it possible to use CSS to define <hr> as a graphic image?

Yes, and Alan Flavell has a nice page that tells you how.

http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Alan J. Flavell]

On Sun, 28 Dec 2003, Jukka K. Korpela wrote:

This reminded me of Alan Flavell's "CSS1 and the Decorative HR",
http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html
which explains how complicated the issue is.
Thanks for the plug ;-)

To be honest, it explains how complicated the issue _was_ at the time
that I wrote it: as the preface says, it was devised in the hope of
getting something that worked also in IE4, NN4.* etc.

Nowadays I would probably prefer to shield the older browsers from
most of the CSS, and use a more straightforward, spec-conforming
stylesheet to get the effect in more recent versions. After all,
it's only meant as a cosmetic device, and when the chips are down
the details of the presentation are meant to be optional.
Personally I think using something like
<div><img alt="End of section." src="deco.gif"></div>
is a feasible alternative to using <hr> and then trying to style it
into an image. After all, <hr> itself is at least half-presentational,
and we generally use <img> to add purely decorative images. (Writing
adequate alt attributes is more important than being theoretically
puristic about not using "presentational tags".)

I'm not going to argue with your basic thesis there - but perhaps with
the detail: it would be helpful if you said directly what "adequate"
alt attribute you would consider acceptable in such a case?

In interpreting an <hr>, I presume that a speaking browser would be
expected to insert a longer than usual pause, or something of that
kind?

[Charax]

> Nowadays I would probably prefer to shield the older browsers from

most of the CSS, and use a more straightforward, spec-conforming
stylesheet to get the effect in more recent versions. After all,
it's only meant as a cosmetic device, and when the chips are down
the details of the presentation are meant to be optional.

Alan,

This is an intriguing approach. Can you point me to a source of info on how
to shield earlier browsers from CSS? I still have a lot of traffic from
Version 4 browsers (and, alas, even earlier versions, but I have stopped
trying to support them).

Your web page on HR substitution was very helpful.

Thank you,

Chris Hopkins
www.parthia.com

[Jukka K. Korpela]

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote:

Personally I think using something like
<div><img alt="End of section." src="deco.gif"></div>
is a feasible alternative to using <hr> and then trying to style
it into an image. After all, <hr> itself is at least
half-presentational, and we generally use <img> to add purely
decorative images. (Writing adequate alt attributes is more
important than being theoretically puristic about not using
"presentational tags".)
I'm not going to argue with your basic thesis there - but perhaps
with the detail: it would be helpful if you said directly what
"adequate" alt attribute you would consider acceptable in such a
case?

Well, things like "End of section." Words that you would use if you
read some text aloud and wanted to indicate major divisions, or changes
of topic, using some explanatory words. At
http://www.cs.tut.fi/~jkorpela/html/alt.html#hr
I even suggest a verbose explanation like
alt="End of page content proper. Contact information follows."
The point is that more information is needed than in visual
presentation, where the user can more or less draw conclusions from the
overall appearance and from small things like that fact that a
horizontal line is near the end of a page.
In interpreting an <hr>, I presume that a speaking browser would be
expected to insert a longer than usual pause, or something of that
kind?

That's what HTML specifications have suggested, and it is a natural
expectation. In a sense we lose that possibility when we don't use
<hr>, but the explanatory words are like a long pause filled with
metainformation. It's a pity that we cannot effectively suggest a
different tone of voice for it, or a pause, using CSS.

--
Yucca, http://www.cs.tut.fi/~jkorpela/