Question

I usually use this to get a one-px high separator line between paragraphs

    <style>
    .narrow_red_hr {color:  #ffa0a0;  background: #ffffff;  border-left-style:none;  height: 1px;}
    .hr3 {
    margin: 10px 0px 10px 0px;
    height: 1px;
    background: #00ff00;
    width: 100%;
    font-size: 1px; /* IE 6 */
    }
    </style>
    <script type="text/javascript">
    function separator(){
    if (BrowserDetect.browser == "Explorer"){
    document.write('<hr class="narrow_red_hr">');
    } else {
    document.write('<div class=hr3></div>');
    }
    }
    </script>

It usually comes out as I want it, like this:
http://e-dog.info/tmp/correct.bmp

On one page it comes out like this, though, in IE:
http://e-dog.info/tmp/unwanted.bmp

It should be red and one px high, but here, in IE, it comes out as grey and has an unwanted left margin (about 1 px high) in grey. (This styling is only made in IE-browser)

I am not so good with CSS inheritance and how earlier style declarations can affect later. There are several preceding style sheets, I read through them and cannot find any declaration for the hr tag. My guess is that the hr tag has inherited a property somehow. (It is grey like the surrounding text?)

How do I tackle this problem?

I want to rid the hr tag of all previous style declarations or I want to overwrite the declaration giving the wrong color and unwanted left margin. (That’s why I tried giving it background #ffffff, f.ex.)

I am very grateful for all assistance, I am no a trip though and it may take a little while before I can reply. I will definitely appreciate and consider all advice thoroughly, thanks. 🙂

Answer 1

As seen under the comments to the first post, the replies by Jamie Dixon and Xavier Holt hold the answer to the question, thanx guys. Using the border-top (or bottom) property is better than using the whole div like the CSS I had in my first post.

A 1px high, X-browser, horisontal line (for f.ex. separating paragraphs) can thus be obtained by:

<div style="border-top: solid 1px #ffa0a0; margin: 10px 0px 6px 0px;"></div>