[Home]Color of HR

HomePage | RecentChanges | Preferences | Newbie Help

HTML Basics

Jukka Korpela suggests On Sat, 10 Mar 2001 17:17:31 +0200, in alt.html --

<style type="text/css"><!--
div.section { border: solid #f00 0; border-bottom-width: 2px; }
hr { display: none; }
--></style>
 ...
<div class="section">
 whatever
</div>
<hr color="#ff0000">
<div class="section">
 ...
(The first CSS rule could have just { border-bottom: solid #f00 2px; }, but for some odd reason Netscape 4 doesn't get it. So I use the slightly more contrived way of setting an overall border of the desired color and zero width, then changing the width to something nonzero for the bottom border.)

Sam Hughes writes:

The problem with coloring an "<hr>" with CSS is that browsers use different properties (some correctly, another incorrectly) to color the line. Internet Explorer uses the color property, which is incorrect. The color property applies to the foreground text color, not the background color. Mozilla (Netscape) and Opera use the background-color property. While IE's interpretation is incorrect, you can still make up for the problems by using all of the properties combined. Thus, you would get:

 hr {
  color: blue;
  background-color: blue;
 }

In browsers like Opera and Mozilla, you should still have the border of your HR showing, which might be unwanted (and I find it to be particularly ugly). Thus, setting the border to zero is a good idea. While you're at it, setting the height to the normal three pixels would make the appearance nicer and more uniform across the modern browsers, so you can try that, too. I suggest using this code:

 hr {
  color: blue;
  background-color: blue;
  border: 0;
  height: 3px;
 }

Of course, you might want to change the color's name :-)


HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited February 8, 2002 5:27 pm (diff)
Search:

This FAQ is happily hosted by Betadome Digital Media