* * * * *
Them darned fancy <HR>s …
I've been following dive into mark [1]'s 30 days to a more accessible weblog
[2] and so far, everything he's said to do I've pretty much done with this
weblog.
Today's [3] entry is about the <HR> tag and how to change the look of them.
The method he uses works, but is a bit of a kludge. Mostly because it
supports Netscape 4x, which doesn't support CSS to any decent degree.
That's why I've forgone Netscape 4x support entirely. How I do it is the way
it's supposed to be done. First off, in the HTML (HyperText Markup Language)
for this page, I hide the style sheet from Netscape 4x:
-----[ HTML ]-----
<SCRIPT>
@import "/bdstyle.css";
</SCRIPT>
-----[ END OF LINE ]-----
Netscape 4x doesn't suport “@import” so nothing gets included (thankfully,
else my style sheet would crash it, hard). The style sheet then has:
-----[ CSS ]-----
HR.next
{
width: 50px;
height: 16px;
border: none;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
background-image: url(hr.gif);
background-repeat: no-repeat;
background-position: center;
}
-----[ END OF LINE ]-----
Then in the HTML page, to use the image, I do:
-----[ HTML ]-----
<HR CLASS="next">
-----[ END OF LINE ]-----
And I have my fancy <HR>. And it works fine under the current versions of
Netscape (6x), Mozilla (from about 0.9.2 on up), Opera and Internet Explorer
(although those last two draw a faint grey border around the image).
[1]
http://www.diveintomark.org/
[2]
http://diveintomark.org/archives/2002/06/14.html#day_5_belated_introduction
[3]
http://diveintomark.org/archives/2002/07/12.html#day_25_using_real_horizontal_rules_or_faking_them_properly
Email author at
[email protected]
