<HR> Styling

RZX Developer · #1 Jul 31st, 2007, 12:23

Hi All,

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

crackafaza · #2 Jul 31st, 2007, 12:28

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

Thats the basic HR in css hope that helps.

matelot · #3 Jul 31st, 2007, 12:44

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

RZX Developer · #4 Jul 31st, 2007, 14:16

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

MikeHopley · #5 Jul 31st, 2007, 14:20

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

or

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

matelot · #6 Jul 31st, 2007, 14:22

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 · #7 Jul 31st, 2007, 14:26

Quote:

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

Quote:

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 · #8 Jul 31st, 2007, 14:42

the css style works perfect in IE7 but not in FireFox

CSS

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

XHTML

<hr />

karinne · #9 Jul 31st, 2007, 14:55

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

RZX Developer · #10 Jul 31st, 2007, 15:00

Thanks for the advise

matelot · #11 Jul 31st, 2007, 15:01

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 · #12 Jul 31st, 2007, 15:03

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

Cheerz

pa007 · #13 Jul 31st, 2007, 15:47

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 · #14 Jul 31st, 2007, 15:53

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

pa007 · #15 Jul 31st, 2007, 15:57

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 · #16 Jul 31st, 2007, 16:03

I didnt thnk of tht, thanks Pete

MikeHopley · #17 Jul 31st, 2007, 21:12

Quote:

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 · #18 Jul 31st, 2007, 22:10

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 · #19 Jul 31st, 2007, 22:15

Quote:

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>.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
help with styling my blog please	alexgeek	Website Planning	12	Sep 23rd, 2007 01:25
CSS border styling	RZX Developer	Web P

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
<HR> Styling