HighDots Forums  

color of horizontal line

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss color of horizontal line in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Wilhelm Kutting
 
Posts: n/a

Default color of horizontal line - 01-19-2005 , 11:31 AM






Hi,
ist it possible to change the Color of a horizontal <hl> line?
i tried with background-color and color but it didn't work?
what attribut changes the color?

Reply With Quote
  #2  
Old   
Harlan Messinger
 
Posts: n/a

Default Re: color of horizontal line - 01-19-2005 , 11:56 AM






Wilhelm Kutting wrote:
Quote:
Hi,
ist it possible to change the Color of a horizontal <hl> line?
Did you mean <hr>?

Quote:
i tried with background-color and color but it didn't work?
what attribut changes the color?
Try border-color.


Reply With Quote
  #3  
Old   
Arne
 
Posts: n/a

Default Re: color of horizontal line - 01-19-2005 , 12:06 PM



Once upon a time *Wilhelm Kutting* wrote:

Quote:
Hi,
ist it possible to change the Color of a horizontal <hl> line?
i tried with background-color and color but it didn't work?
what attribut changes the color?
This is an example that I use

hr {height:1px; border-style:solid; border-width:1px 0 0 0;
border-color:#74A8C0;}

Play with the values to make look as you prefer

--
/Arne
http://web.telia.com/~u97802964/

If you owe the bank a million, you have a problem.
If you owe the bank ten million, the bank has a problem! (Unknown)


Reply With Quote
  #4  
Old   
Chris Leipold
 
Posts: n/a

Default Re: color of horizontal line - 01-20-2005 , 03:57 AM



Hi,
Quote:
ist it possible to change the Color of a horizontal <hl> line?
i tried with background-color and color but it didn't work?
what attribut changes the color?
I would try to avoid <hr>s (I a assume you meant them). Usually <hr>s
are used to optically seperate conent. This can be accomplished by using
a border-bottom.

Chris


Reply With Quote
  #5  
Old   
Philip Ronan
 
Posts: n/a

Default Re: color of horizontal line - 01-20-2005 , 05:09 AM



Chris Leipold wrote:

Quote:
Hi,
ist it possible to change the Color of a horizontal <hl> line?
i tried with background-color and color but it didn't work?
what attribut changes the color?

I would try to avoid <hr>s (I a assume you meant them). Usually <hr>s
are used to optically seperate conent. This can be accomplished by using
a border-bottom.
Actually I think it's better to leave the the HRs *in* and use CSS to
disguise them if necessary. That way you get much better results in text and
audio browsers.

Wrap the HRs inside DIV elements like this:

<DIV class="hr"><HR></DIV>

and put this in your CSS file:

HR {
display: none;
}

DIV.hr {
margin: 2.0em 0;
height: 0.4em;
background-color: #fc9;
clear: both;
}

Here's an article you might find useful:
<http://diveintoaccessibility.org/day..._rules_or_faki
ng_them_properly.html>

--
phil [dot] ronan @ virgin [dot] net
http://vzone.virgin.net/phil.ronan/




Reply With Quote
  #6  
Old   
Chris Leipold
 
Posts: n/a

Default Re: color of horizontal line - 01-20-2005 , 06:21 AM



Quote:
Hi,

ist it possible to change the Color of a horizontal <hl> line?
i tried with background-color and color but it didn't work?
what attribut changes the color?

I would try to avoid <hr>s (I a assume you meant them). Usually <hr>s
are used to optically seperate conent. This can be accomplished by using
a border-bottom.

Actually I think it's better to leave the the HRs *in* and use CSS to
disguise them if necessary. That way you get much better results in text and
audio browsers.
IMO this depends if the hr has only represental functions or if it is
content.
And the argument that NS4 displays a correct hr is poor. NS4-users must
be punished. ;-)

CL


Reply With Quote
  #7  
Old   
sneill@mxlogic.com
 
Posts: n/a

Default Re: color of horizontal line - 01-20-2005 , 12:52 PM



Works well in IE and Moz...

HR {
background-color: #006699; /* mozilla */
border: 0px; /* fixes mozilla height */
clear: left;
color: #006699; /* ie */
float: left;
height: 1px;
margin: 4px 0px 4px 0px;
width: 99%;
}


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.