This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.

HR with CSS

Workarounds: HR

Colorful HR in NN, IE and Opera

A frequent question in HTML authoring newsgroups is how to add colour to an <HR>. The unsatisfactory answer is that you can't - for Netscape, which doesn't understand the color attribute for <HR>. Only marginally more satisfactory is using CSS to suggest a bottom border for HTML elements, simulating the <HR>, whilst adding colour.

Using markup similar to:

 H1.workaround {border-bottom-width: 3pt; border-style: solid; border-color: #cc3333; width: 100%; font-size: 1.8em; font-weight: bold;} H1.workaround {border-bottom: 3pt solid #cc3333;border-top: 0 solid #f0f0f0;border-left: 0 solid #f0f0f0;border-right: 0 solid #f0f0f0; }

Warning : If you use something like this, be sure to change the colour from '#f0f0f0' to the background colour used in your <BODY> declaration.

The actual markup required to suggest similar rendering is bloated, due to browser compliance issues. Opera 3.5+ nor IE 4.0+ support the CSS property 'border-bottom-width', although they do support the shorthand 'border-bottom'; Netscape doesn't support the shorthand, but does support 'border-bottom-width'. Because Netscape's CSS implementation is so broken, it was necessary to add suggestions for font-size and font-weight to the declaration.

Not to be generally recommended (even as a workaround), redundant declarations were the only method found to suggest similar renderings. The more compliant Opera and IE pick up the font-weight and font-size rules from the first declaration, and render the second declaration. Netscape uses the tailor made first declaration, and ignores the second one.

The last example is to answer a question in an Opera newsgroup.

Sue Sims