[iOliverC]

Hi guys,

I have a HR that I am using here:

http://www.talacia.com/new/index.php (its right at the very bottom, above the copyright) notice how ugly it is. So in my stylesheet I put:

hr {
width: 100%;
height: 1px;
background: #BDBDBD
}

But, my <hr> is still as ugly as it was before. Is there a way to fix this?

Thanks,
Oliver

[philzilla]

weird. even CSSEdit's Safari preview shows it like it should be shown.

[iOliverC]

I just changed it to:

hr {
width: 100%;
margin-bottom: solid 1px #BDBDBD;
}

And it seems to have made its height smaller, but its still 2 px high and has black and grey lines instead of my color. Any ideas?

[Synotic]

Originally posted by iOliverC:
Hi guys,

I have a HR that I am using here:

http://www.talacia.com/new/index.php (its right at the very bottom, above the copyright) notice how ugly it is. So in my stylesheet I put:

hr {
width: 100%;
height: 1px;
background: #BDBDBD
}

But, my <hr> is still as ugly as it was before. Is there a way to fix this?

Thanks,
Oliver

Ugliness is subjective... but make sure you remove the borders since Safari (and I think Mozilla as well) use borders to render the HR. Also, the "width: 100%" is redundant because blocks by default stretch to the full length of their parent container.

[iOliverC]

Ok, so I did this:

<hr size="1" noshade>

This made it black and 1 pixel high. I then did this to my CSS:

hr {
background: #BDBDBD;
}

But its still black, any ideas? I've tried color: #BDBDBD; too.

Thanks,
Oliver

[madmacgames]

even some Mozilla doesn't apply the height or background.

I do like this when I want a solid hr type split (shows the same in browsers):

Code:
.Split {
height: 1px;
background: #BDBDBD;
padding: 5px 0 5px 0;
margin: 0;
}

.Split hr {
display: none;
}

<div class="Split"><hr /></div>

*EDIT* what I posted above I use for splits with images... sort of overkill for just a solid color. This will mostly work for a solid color (note: Opera will still add a 1px border around the HR I think, so maybe the div solution above is best for compatibility with HRs less than 3px high?):

Code:
hr {
border: 0;
color: #BDBDBD;
background: #BDBDBD;
height: 1px;
}

[iOliverC]

The code at the bottom seems to work, thanks a lot .

[Oisín]

Another fairly simple way of doing it in this case could have been to set the copyright div's "border-top: 1px solid #BDBDBD;", and then maybe add a margin-top of 10px or something to make a little space between the border and the text...

[Millennium]

The problem comes with how different browsers render a horizontal rule.

The way you're supposed to render it is with a simple empty box, with the borders defining the lines. Mozilla, Safari, and Opera all render this way, so to change the sides of the HR you change the border, and to change the inside you change the background, as for any other box. Setting border-top was good, but you need to set the other three border-widths to zero to make sure they don't appear.

IE -Windows or Mac- seems to work differently, though I'm not sure yet exactly how. I have noticed, however, that you can't get rid of the "default" HR border (the 3-D box), even though you can change the background image.

[iOliverC]

Hmm, the border-top idea sounds good. Never thought of that .

Thanks guys for all the suggestions, appreciate it.
Oliver