If a design calls for a graphical horizontal rule, often front end developers will stick in an
img tag and call it a day. However, an
hr tag would be more semantic – and, most rich text editors for content management systems have a button for the horizontal rule.
These styles allow cross-browser image replacement for horizontal rule. In my implementation, the IE rules needed to be embedded, but it may have simply been a style overriding elsewhere in the stylesheet. Try it in a conditional commented stylesheet first.
The modern method uses
background-image to replace the
hr, which is defined normally by border. IE works some wonky stuff with
list-item and you may have to scoot things around to get it to work just so, but it works!
/* ——- EMBEDDED ——- */
/* —– STYLESHEET —– */
background:url(short-rule.gif) repeat-x top left;
background:url(med-rule.gif) no-repeat top center;