styling hr-tag, unclear heritance?
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. :-)
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>
精彩评论