Creating a css style hr horizontal line
When using CSS to create your custom <hr /> dividing line there a a couple of things you have to remember, one is that Internet Explorer and Safari needs the background colour tag defined and the height set to 1px or higher, (Safari will show the line in 3D) in order to display it properly.
Here is a standard HR inline style without the background colour set:-
<hr style="height: 1px; color: #008000; width: 75% " />
You will see that in IE and Safari it looks like a light grey indent on the page, but in Firefox, Opera etc. it is a green line.
Now let us add the background colour.
<hr style="height: 1px; width: 75%; color: #008000; background-color:#008000 " />
Now you will see that the line is green in all browsers. NOTE you must view this page in different browsers to see the effect.
You can go a little further and add a coloured border to your <hr /> display, this does mean that the actual hr style tag starts to get a little bigger, but you only have to master it once, after that it becomes more easy. Here is the html code that you will need, change the colour values to what suits you best.
It is recommended to use a minimum height setting of 4px for it to show up properly in Firefox.
<hr style="height: 4px; width: 75%; color: #FFFF80; background-color:#FFFF80; border-style:solid; border-width:1px; border-color:#000040 " />
Just place the above code wherever you want your dividing line.
In the examples above I have used Inline CSS Styles, but you can set a global HR Rule, the difference being that with the global one you will only be able to have one line style per page. The main global setting would look like the example below and will have to be placed above your </head> tag, or, placed within your current style sheet if you are using one.
hr {
color: #FFFF00;
background-color: #FFFF00;
height: 4px;
width: 75%;
border: 1px solid #FF0000;
}
</style>
If you do not want a border around your line, just leave out the border value.