What are the CSS value pairs for HR tag?

I want to do

<hr noshade size="5" width="80%"> by use CSS instead HTML.

I try

<style type="text/css">

HR { size: 5px; width: 80%; length: 5px; height: 5px;
border-styleadding: 0}

</style>

But none of them work! Please help. Thanks!

RC <raymond.chui (AT) noaa (DOT) gov> wrote:

I want to do

hr noshade size="5" width="80%"> by use CSS instead HTML.

I try

style type="text/css"

HR { size: 5px; width: 80%; length: 5px; height: 5px;
border-styleadding: 0}

/style

But none of them work! Please help. Thanks!

Have you read the CSS specs?

width and height are CSS properties.
border-style is a CSS property, but padding is not a valid value for
border-style.
size and length are not CSS properties.

HR is a funny element in HTML terms and browsers differ on how they
treat it as a CSS box.

width: 80%;
height: 5px;
border-style: solid;
border-color: #9D9DA1;
background: #9D9DA1;

will produce an hr that looks identical to the html <hr noshade
size="5" width="80%"> in IE and very similar to it in Mozilla and
Opera.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

RC wrote:

I want to do

hr noshade size="5" width="80%"> by use CSS instead HTML.

I try

style type="text/css"
HR { size: 5px; width: 80%; length: 5px; height: 5px;
border-styleadding: 0}
/style

But none of them work! Please help. Thanks!

hr{width:80%;height:5px;border-bottom:5px solid green;}
or
hr{width:80%;height:5px;color:green;background-color:green;border:none;}


--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

RC wrote on 11 mei 2004 in comp.infosystems.www.authoring.stylesheets:

I try

style type="text/css"

HR { size: 5px; width: 80%; length: 5px; height: 5px;
border-styleadding: 0}

/style

But none of them work! Please help. Thanks!

you cannot just invent css properties!

size and length are not css for hr
border-styleadding is incorrect syntax

try this:

hr {width:80%;height:25px;color:green;
border-style:solid;padding:0;}

works tested IE6

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

RC wrote:

I want to do
hr noshade size="5" width="80%"> by use CSS instead HTML.
[snip]

I use a different approach from your other replies. I squash the hr flat as
below, then add a border just to the top. (The various 0s in the example below
cater for different browsers). I then make the top border look as I want, not
the hr itself. Example:

hr {
height: 0;
width: 80%;
border-style: solid;
border-color: #777;
border-width: 5px 0 0 0;
}

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Barry Pearson wrote:

RC wrote:

I want to do
hr noshade size="5" width="80%"> by use CSS instead HTML.

[snip]

I use a different approach from your other replies. I squash the hr flat as
below, then add a border just to the top. (The various 0s in the example below
cater for different browsers). I then make the top border look as I want, not
the hr itself. Example:

hr {
height: 0;
width: 80%;
border-style: solid;
border-color: #777;
border-width: 5px 0 0 0;
}

Doesn't give 5px height in IE6.0 though. It does if you give
the height 5px too.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

Barry Pearson wrote:
[snip]
hr {
height: 0;
width: 80%;
border-style: solid;
border-color: #777;
border-width: 5px 0 0 0;
}

Doesn't give 5px height in IE6.0 though. It does if you give
the height 5px too.

Whoops! Apologies for cutting corners with my checking before posting. I was
so used to this working for the 1px case, that I made an assumption about IE.
Fatal to make an assumption about IE!

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Barry Pearson wrote:

I was so used to this working for the 1px case,

Same here. I just happened to have a last look before I
pressed send, otherwise we both would have given the same
answer in error :-D

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

all right, all right! Just let you all know
I did

hr {border-style: solid; background-color: black; height: 10px;
border: none; width: 80%; color: black}

is work fine in IE 6.0, but never able get it work in
Netscape 7.1

If you find a way work in Netscape, too. Then please
let me know.

Now you know why Bill Gate gained more
browser markets than Netscape.

RC wrote:

all right, all right! Just let you all know
I did

hr {border-style: solid; background-color: black; height: 10px;
border: none; width: 80%; color: black}

is work fine in IE 6.0, but never able get it work in
Netscape 7.1

If you find a way work in Netscape, too. Then please
let me know.

Works in Netscape 7.1 just like that.
Can you put an example online of it not working?

Here's my example (working :-) )
http://locusmeus.com/temp/hr.html

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -