What are the CSS value pairs for HR tag?

[RC]

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-style:padding: 0}

</style>

But none of them work! Please help. Thanks!

[Els]

Re: What are the CSS value pairs for HR tag?

RC wrote:
[color=blue]
> 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-style:padding: 0}
> </style>
>
> But none of them work! Please help. Thanks![/color]

hr{width:80%;he ight:5px;border-bottom:5px solid green;}
or
hr{width:80%;he ight:5px;color: green;backgroun d-color:green;bor der:none;}


--
Els

http://locusmeus.com/

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Steve Pugh]

Re: What are the CSS value pairs for HR tag?

RC <raymond.chui@n oaa.gov> wrote:
[color=blue]
>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-style:padding: 0}
>
></style>
>
>But none of them work! Please help. Thanks![/color]

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@pugh.net > <http://steve.pugh.net/>

[Evertjan.]

Re: What are the CSS value pairs for HR tag?

RC wrote on 11 mei 2004 in comp.infosystem s.www.authoring.stylesheets:
[color=blue]
> I try
>
> <style type="text/css">
>
> HR { size: 5px; width: 80%; length: 5px; height: 5px;
> border-style:padding: 0}
>
> </style>
>
> But none of them work! Please help. Thanks![/color]

you cannot just invent css properties!

size and length are not css for hr
border-style:padding is incorrect syntax

try this:

hr {width:80%;heig ht:25px;color:g reen;
border-style:solid;pad ding:0;}

works tested IE6

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

[Barry Pearson]

Re: What are the CSS value pairs for HR tag?

RC wrote:[color=blue]
> I want to do
> <hr noshade size="5" width="80%"> by use CSS instead HTML.[/color]
[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/

[Els]

Re: What are the CSS value pairs for HR tag?


Barry Pearson wrote:
[color=blue]
> RC wrote:
>[color=green]
>>I want to do
>><hr noshade size="5" width="80%"> by use CSS instead HTML.[/color]
>
> [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;
> }[/color]

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 -

[Barry Pearson]

Re: What are the CSS value pairs for HR tag?

Els wrote:[color=blue]
> Barry Pearson wrote:[/color]
[snip][color=blue][color=green]
>> hr {
>> height: 0;
>> width: 80%;
>> border-style: solid;
>> border-color: #777;
>> border-width: 5px 0 0 0;
>> }[/color]
>
> Doesn't give 5px height in IE6.0 though. It does if you give
> the height 5px too.[/color]

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/

[Els]

Re: What are the CSS value pairs for HR tag?

Barry Pearson wrote:
[color=blue]
> I was so used to this working for the 1px case,[/color]

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 -

[RC]

Re: What are the CSS value pairs for HR tag?



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.

[Els]

Re: What are the CSS value pairs for HR tag?

RC wrote:
[color=blue]
> 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.[/color]

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 -

[RC]

Re: What are the CSS value pairs for HR tag?



Els wrote:

[color=blue]
> 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[/color]

OK, you still won 50% only!

<html><head>
<link rel=stylesheet href="hr.css" type="text/css">
</head><body>
<hr>
</body></html>

Of course, created hr.css file as:

<style type="text/css">
hr {border-style: solid; background-color: black; height: 10px; border:
none; color: black}
</style>

I don't see anything wrong above. But don't know why
only works in IE 6.0 but not Netscape 7.1.

Now I changed

<html><head>
<style type="text/css">
hr {border-style: solid; background-color: black; height: 10px; border:
none; color: black}
</style>
</head><body>
<hr>
</body></html>

Then work both.

Can you explain that?!

[Els]

Re: What are the CSS value pairs for HR tag?

RC wrote:
[color=blue]
> Of course, created hr.css file as:
>
> <style type="text/css">
> hr {border-style: solid; background-color: black; height: 10px; border:
> none; color: black}
> </style>
>
> I don't see anything wrong above. But don't know why
> only works in IE 6.0 but not Netscape 7.1.[/color]

Stylesheets don't need <style type="text/css"></style> in
them. You just put the styles in it, and that's it.
Apparently NS7.1 chokes on it, while IE doesn't.
So put only
hr {border-style: solid; background-color: black; height:
10px; border: none; color: black}
in the stylesheet, and it works in Netscape too :-)

--
Els

http://locusmeus.com/

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Neal]

Re: What are the CSS value pairs for HR tag?

On Tue, 11 May 2004 11:09:24 -0400, RC <raymond.chui@n oaa.gov> wrote:
[color=blue]
> I want to do
>
> <hr noshade size="5" width="80%"> by use CSS instead HTML.[/color]

The best solution I have found is to display: none; the <hr>, placed
inside a div with a styled border.

[Els]

Re: What are the CSS value pairs for HR tag?

Neal wrote:
[color=blue]
> On Tue, 11 May 2004 11:09:24 -0400, RC <raymond.chui@n oaa.gov> wrote:
>[color=green]
>> I want to do
>>
>> <hr noshade size="5" width="80%"> by use CSS instead HTML.[/color]
>
> The best solution I have found is to display: none; the <hr>, placed
> inside a div with a styled border.[/color]

Why? Isn't that the same as a div with a styled border
without the <hr> inside?

--
Els

http://locusmeus.com/

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Neal]

Re: What are the CSS value pairs for HR tag?

On Tue, 11 May 2004 22:12:08 +0200, Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue]
> Neal wrote:
>[color=green]
>> On Tue, 11 May 2004 11:09:24 -0400, RC <raymond.chui@n oaa.gov> wrote:
>>[color=darkred]
>>> I want to do
>>>
>>> <hr noshade size="5" width="80%"> by use CSS instead HTML.[/color]
>>
>> The best solution I have found is to display: none; the <hr>, placed
>> inside a div with a styled border.[/color]
>
> Why? Isn't that the same as a div with a styled border without the <hr>
> inside?
>[/color]


The div WITH the hr inside degrades to a hr in a non-CSS environment.