Anyone who ever tried to style horizontal rulers in Internet Explorer knows that this is nearly impossible: IE<8.0 only accepts a small subset of CSS-Rules for styling HRs. This small script can help to solve this little problem. The functionality is straightforward: define all the attributes for your HR for a DIV of the same class. Parse through the HTML and replace every HR with a div of the same class-name:
The Javascript
This code belongs into the head of our HTML: <!--[if lte IE 8]> <script type='text/javascript'> function replaceHR(rulerNum){ var ruler=document.getElementsByTagName("hr")[rulerNum]; var documentFragment= document.createDocumentFragment(); var oldClassName=ruler.className; var replacementDiv= document.createElement("div"); replacementDiv.className=oldClassName+"_div"; documentFragment.appendChild(replacementDiv); ruler.parentNode.replaceChild(documentFragment, ruler); } var l=document.getElementsByTagName("hr").length-1; for(var i=l; i>-1; i--){ replaceHR(i); } </script> <![endif]-->
(Just in case we added "_div" to the end of the classname. This is only optional but can be helpful in some situations). The stylesheet will look like this:
div.myfancyrulerclass_div, hr.myfancyrulerclass { background-image: url(somefancyimage); } That's it. IE-users with Javascript disabled will see an unstyled HR. If you want to hide HRs for this users or change some css-attributes, use your favorite css-filters.