 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / December 2003HR as a graphic image
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 >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  SignatureStan 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/ > 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".) SignatureYucca, http://www.cs.tut.fi/~jkorpela/ > 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> [quoted text clipped - 3 lines] > 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? > 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 >> Personally I think using something like >> <div><img alt="End of section." src="deco.gif"></div> [quoted text clipped - 9 lines] > "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. SignatureYucca, http://www.cs.tut.fi/~jkorpela/ |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.