[ben_faulkner]

i want to create a dividing line between text sections such as in:

http://www.channel4.com/blogs/

if i put the following into my HTML it works but the line still comes out black (in firefox)

<hr style="clear: both; margin-left: 0px; margin-right: 0px; margin-top: 5px; margin-bottom: 5px; color:#CCC">

ideally i would like to put a 2px dividing line between all sections. the first px being a dark colour and the 2nd being a lighter colour to create a kind of bevel effect.

any help would be great. Im guessing i should be doing this in CSS somehow anyway instead of HTML.

(i do not want to create a separate div for each text section)

Thanks

[MrBrightside]

They are using a list with a bottom border under each item.
If you wanted to use a <hr/> you'd apply a border to that too.

Try this:

<hr style="border:none;border-top:1px solid #666;border-bottom:1px solid #ccc;" />

border:none first resets the original borders (which include side borders), then you set two different colours on the element.

[ben_faulkner]

ah thanks for that, border:none to reset!

can i add margins to the top and bottom of this to space it away from the text a bit?

[ben_faulkner]

not to worry, same principle. thanks!