This is a test page to show you how to make various decorative rulers with style sheets. Before you start reading, please be warned: Netscape Navigator supports style sheets from version 4.0, but does not support any formatting of horizontal rulers. The only exception is the last type, which I am not sure whether it is valid, but it works for Netscape too.
The simpler way is to make your rulers a different color instead of the usual dull gray. All you have to do is to add an embedded style in the head section of your page, like this:
<style>
HR { height:10px; color:#cc99ff; background:cccccc; }
</style>
This gives a height to your ruler and a color (for an explanation of hexadecimal values of colors see the hex-color page ). You will notice a background value. I am sure you will not see any background on the purple ruler below. The reason is this: The style sheet will not validate, unless it has a color and a background property for each element. It can't have only one; it must have both. So it is added for the benefit of validators. The background color is a light gray.
I like my rulers to have a border. So I have added a border below:
<style>
HR { height:10px; color:#cc99ff; background:#cccccc;
border:#ffffff groove 1px; }
</style>
For the border you need a color (ffffff is white), a thickness (1px or more; you can also define " thick" or "thin", but it won't show the same size in all browsers and it can be quite ugly; so a height in pixels is best) and a style. For style, the choice is between: solid, double, groove, ridge, inset and outset. There is a dotted and a dashed style, but I haven't seen a browser (except for the latest Opera) that supports it. The finished ruler is the one below: (remember it will not show up in Netscape). The border also doesn't show in IE 4.0, only 5.0.
Nice, isn't it?
You can add a background image in the ruler above, by specifying
background url(image_directory/image_name.jpg)
but it won't show up in Netscape.
A better way to make a decorative ruler with an image (for best results, this image should have a height of 15 to 16 pixels), which also works with Netscape, is the following:
<style>
.dr { color: #cc99ff; background:#ccccff
url(image_directory/image_name.jpg) repeat-x;
margin:1em; border:1px; padding:0 0; }
.dr HR { width:0; height:1px; }
</style>
Then at the point of the page where you want to insert your ruler, write the following:
<div CLASS="dr"> <hr> </div>
For dr (which for me stands for decorative ruler), you can substitute any name or letter combination you like. Just remember to start with a colon as above. I can't explain why it doesn't work if you don't include an invisible (1 pixel) ordinary ruler, but it seems to be the only combination that works in both Internet Explorer and Netscape and doesn't produce ugly results. It is higher in Netscape than IE.
Also, if you don't specify the background color, your ruler will not look good with Netscape; it will have a (thick or thin, depending on your image's height) black border underneath. The background color should be supplementary with the page background, so it will show like a shadow, or the same, so it will not show at all (as below). The color (first number) will not show in any of the browsers I have tried (with the images turned off I can only see the background color), but maybe some show it, so it had better be a color that will look well.
The image used for the ruler is this:
And here is the ruler we talked about:
If you arrived at this page from some other site and wonder about the way the left border was made, read about it.
Last Updated: