<HR> Styling

[RZX Developer]

Hi All,

I want to style my hr's in css, but i don't know how to go about it, help please!

[crackafaza]

hr {
border: 0;
width: 80%;
}

Thats the basic HR in css hope that helps.

[matelot]

You can also thicken it with a border, or add colour. That's the beauty of CSS.

[RZX Developer]

with the css style will it just work everytime i use the tag <hr> ?

[MikeHopley]

http://www.hixie.ch/tests/evil/mixed/hrbrstyles.html

or

http://www.sovavsiti.cz/css/hr.html

[matelot]

It should do, unless you apply specific styling to it in isolation. Remember, the C of CSS means CASCADING, so the style cascades through your page(s) applying the same attributes, unless altered (say, with an in-line style specific to that entity).

[karinne]

Originally Posted by RZX Developer

with the css style will it just work everytime i use the tag <hr> ?

Yes ... when you code your css like this

Originally Posted by crackafaza

hr {
border: 0;
width: 80%;
}

this applies to every hr element you use in your document.

Same thing as if you were doing

Code: Select all

h1 {
   color: #900;
}

and so on

[RZX Developer]

the css style works perfect in IE7 but not in FireFox

CSS

hr {
border: 0;
width: 100%;
color: #fff000;
height: 2px;
}

XHTML

<hr />

[karinne]

See Mike's 2nd link for explanation on which browser supports which properties.

[RZX Developer]

Thanks for the advise

[matelot]

This is the styling for a HR on one of my sites, and it renders perfectly in FF:

Code: Select all

hr {margin:15px auto; width:150px; background-color:#986; height:2px;}

[RZX Developer]

cheers, it was background-color for it to work in FF instead of color att.

Cheerz

[pa007]

You shouldn't be using horizontal rules at all, in my opinion. You need to separate content/structure from presentation. Just use pure css for this.

Pete.

[RZX Developer]

Thanks for the advise Pete, but I am using the <hr /> as it is for around my Nav Menu

[pa007]

Why not give the ul a bottom or top border, depending on where you want it. I'm sure this would be very simple to achieve without any presentational mark-up.

Pete.

[RZX Developer]

I didnt thnk of tht, thanks Pete

[MikeHopley]

Originally Posted by pa007

You shouldn't be using horizontal rules at all, in my opinion. You need to separate content/structure from presentation. Just use pure css for this.

<hr> is not entirely presentational: it indicates a separator or divider.

In fact, a case could easily be made that <hr> is "more semantic" than (say) using a CSS border in its place!

Personally I never use this element, but I don't see its use as wrong. Convention generates meaning; more on this in a later article.

[pa007]

I agree that it could be viewed that way but I believe in not using these things just because they have come to mean something and instead sticking to strict principles in some vain attempt at cleaning up the mess.

Pete.

[MikeHopley]

Originally Posted by pa007

I agree that it could be viewed that way but I believe in not using these things just because they have come to mean something and instead sticking to strict principles in some vain attempt at cleaning up the mess.

<hr>'s conventional meaning goes back long, long before the invention of the worldwide web. It's regularly used in print documents, in some form or other.

Ever see * or * * * (or various other glyphs) used as a separator in a book? It's just a fancy <hr>.