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]

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

[Steve Pugh]

RC <ra**********@noaa.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-style:padding: 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 <st***@pugh.net> <http://steve.pugh.net/>

[Evertjan.]

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-style:padding: 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-style:padding 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)

[Barry Pearson]

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/

[Els]

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 -

[Barry Pearson]

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/

[Els]

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 -

[RC]

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]

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 -

[RC]

Els wrote:

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

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]

RC wrote:

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.

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]

On Tue, 11 May 2004 11:09:24 -0400, RC <ra**********@noaa.gov> wrote:

I want to do

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

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

[Els]

Neal wrote:

On Tue, 11 May 2004 11:09:24 -0400, RC <ra**********@noaa.gov> wrote:

I want to do

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

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

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]

On Tue, 11 May 2004 22:12:08 +0200, Els <el*********@tiscali.nl> wrote:

Neal wrote:

On Tue, 11 May 2004 11:09:24 -0400, RC <ra**********@noaa.gov> wrote:

I want to do

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

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

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

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

[Els]

Neal wrote:

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

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

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

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

Yep, you're right. Hadn't thought of that.
Still another question though: why use the div at all, if
the other options mentioned in this thread work well
cross-browser? Or maybe they don't?

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

[Harlan Messinger]

"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...

RC wrote:

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.
Stylesheets don't need <style type="text/css"></style> in
them.

Not only don't they need it, it's wrong. They're HTML and go in the HTML
document. They're not part of the CSS. Maybe IE accepts it, but that's just
IE being gentle.
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 :-)

[Neal]

On Tue, 11 May 2004 22:29:46 +0200, Els <el*********@tiscali.nl> wrote:

Neal wrote:

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

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

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

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

Yep, you're right. Hadn't thought of that.
Still another question though: why use the div at all, if the other
options mentioned in this thread work well cross-browser? Or maybe they
don't?

I have found the box model of hr to be undependable. Besides, if I set the
element to display: none;, I can't style the borders anyway, can I?

[Els]

Neal wrote:

The div WITH the hr inside degrades to a hr in a non-CSS environment.
Yep, you're right. Hadn't thought of that.
Still another question though: why use the div at all, if the other
options mentioned in this thread work well cross-browser? Or maybe
they don't?

I have found the box model of hr to be undependable.

I'll take your word for that ;-)
Besides, if I set
the element to display: none;, I can't style the borders anyway, can I?

Not visibly, no :-)

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

[Els]

Harlan Messinger wrote:

Stylesheets don't need <style type="text/css"></style> in
them.

Not only don't they need it, it's wrong. They're HTML and go in the HTML
document. They're not part of the CSS. Maybe IE accepts it, but that's just
IE being gentle.

That's what I was trying to say, but didn't :-)

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

[Arne]

Neal wrote:

On Tue, 11 May 2004 22:12:08 +0200, Els <el*********@tiscali.nl> wrote:

Neal wrote:

On Tue, 11 May 2004 11:09:24 -0400, RC <ra**********@noaa.gov> wrote:
I want to do

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

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

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

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

This works very fine for me:
hr {height:1px; border-style:solid; border-width:1px 0 0 0;
border-color:#000000; margin-top:10px; margin-bottom:0px;}

In a non-CSS enviroment there should be just the "ordinary" horizontal
line. Can't see why div's is needed.

--
/Arne

[Neal]

On Tue, 11 May 2004 21:30:09 GMT, Arne <ar********@telia.com> wrote:

Neal wrote:

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

This works very fine for me:
hr {height:1px; border-style:solid; border-width:1px 0 0 0;
border-color:#000000; margin-top:10px; margin-bottom:0px;}

In a non-CSS enviroment there should be just the "ordinary" horizontal
line. Can't see why div's is needed.

Well, normally there is a div break anyhow. If I want the effect of an hr
in a page, I'll normally just style an existing border. Then so non-CSS
users can see the break visibly, I add the non-displayed hr.

I haven't tested hr much myself, my concerns with its border style are
anecdotal. Perhaps my concerns are unfounded. Still, no use in styling it
anyway, as divs are going to be used as well, and why not just use what's
there?

[RC]

Els wrote:

Harlan Messinger wrote:

Stylesheets don't need <style type="text/css"></style> in
them.

Not only don't they need it, it's wrong. They're HTML and go in the HTML
document. They're not part of the CSS. Maybe IE accepts it, but that's
just
IE being gentle.

That's what I was trying to say, but didn't :-)

Hahahaha...........!!! I am proof to you (Els) and Harlan.
Go to http://rhchui.tripod.com/test/hr.html see yourself.

I created hr.css file and made hr and h1 CSS in that file.
You will see h1 works fine in both IE and Netscape.
But hr works in IE ONLY.
Can you two explain why? Order for hr works in Netscape,
I have to put hr's CSS inside the HTML file. I really
don't want to do that. Because I have 64 HTML files.
I want to created only one CSS file for all 64 HTML files.

[Els]

RC wrote:

Els wrote:

Harlan Messinger wrote:

Stylesheets don't need <style type="text/css"></style> in
them.

Not only don't they need it, it's wrong. They're HTML and go in the HTML
document. They're not part of the CSS. Maybe IE accepts it, but
that's just
IE being gentle.

That's what I was trying to say, but didn't :-)

Hahahaha...........!!! I am proof to you (Els) and Harlan.
Go to http://rhchui.tripod.com/test/hr.html see yourself.

I created hr.css file and made hr and h1 CSS in that file.
You will see h1 works fine in both IE and Netscape.
But hr works in IE ONLY.
Can you two explain why? Order for hr works in Netscape,
I have to put hr's CSS inside the HTML file. I really
don't want to do that. Because I have 64 HTML files.
I want to created only one CSS file for all 64 HTML files.

Now who is not paying attention here?
Your hr.css is now like this:

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

h1 { color: yellow; background-color: blue }
-->
</style>

Please leave out the
<style type="text/css">
<!--
and the
-->
</style>
and all will work fine.

Your question shouldn't be why hr isn't working in Netscape,
but why h1 _is_ working.
The answer to that, I don't know.

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

[Steve Pugh]

RC <ra**********@noaa.gov> wrote:

Harlan Messinger wrote:

Els wrote:

Stylesheets don't need <style type="text/css"></style> in
them.

Not only don't they need it, it's wrong. They're HTML and go in the HTML
document. They're not part of the CSS. Maybe IE accepts it, but that's
just IE being gentle.

Hahahaha...........!!! I am proof to you (Els) and Harlan.

Proof that you can't read?
Go to http://rhchui.tripod.com/test/hr.html see yourself.
Makes the same mistake that you've already been told how to fix.
I created hr.css file and made hr and h1 CSS in that file.
You will see h1 works fine in both IE and Netscape.
But hr works in IE ONLY.
If you swapped the hr and the h1 styles around then the hr would work
in NN7 and the h1 wouldn't. The presence of the HTML causes the first
style to be ignored.
So the wrong code only partially screws things up for NN7. So what?
The correct code works.
Can you two explain why?
They already have.
Order for hr works in Netscape,
I have to put hr's CSS inside the HTML file. I really
don't want to do that. Because I have 64 HTML files.
I want to created only one CSS file for all 64 HTML files.

Create the CSS file properly. Get rid of everything inside hr.css that
is not CSS. That's what Els and Harlan have been telling you.

See http://steve.pugh.net/test/hr.html to see it working properly.

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Els]

Els wrote:

Your question shouldn't be why hr isn't working in Netscape, but why h1
_is_ working.
The answer to that, I don't know.

Hang on, I do know:
If you let hr and h1 trade places in your stylesheet, the hr
will work, while the h1 won't.
The first { stops the effect of the
<style type="text/css">
<!-- .
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Steve Pugh wrote:

If you swapped the hr and the h1 styles around then the hr would work
in NN7 and the h1 wouldn't. The presence of the HTML causes the first
style to be ignored.

You wrote that answer while I was still figuring it out :-)

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

[RC]

Steve Pugh wrote:

Create the CSS file properly. Get rid of everything inside hr.css that
is not CSS. That's what Els and Harlan have been telling you.

See http://steve.pugh.net/test/hr.html to see it working properly.

OK, guess Netscape is much picky (American term) than IE.
Now, everything is working fine for me :)

BTW, if you can't go to http://xxxx.tripod.com/xxxx/
Because you are living in a censorship country like China.

[Els]

RC wrote:

OK, guess Netscape is much picky (American term) than IE.
I'm not familiar with American terms, but I know what picky
means. I gues you meant to say 'much pickier' or 'more picky'?
Now, everything is working fine for me :)
That's good.
BTW, if you can't go to http://xxxx.tripod.com/xxxx/
Because you are living in a censorship country like China.

Am I missing something here?

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

[Neal]

On Wed, 12 May 2004 10:38:38 -0400, RC <ra**********@noaa.gov> wrote:

BTW, if you can't go to http://xxxx.tripod.com/xxxx/
Because you are living in a censorship country like China.

What the hell are you talking about? Who brought up no being able to go
there?

Are you ill?

[Alan J. Flavell]

On Wed, 12 May 2004, RC wrote:

OK, guess Netscape is much picky (American term) than IE.

The CSS specification *requires* CSS-conforming clients to
ignore certain kinds of defective statements, and generally
recommends ignoring anything that can't be clearly understood.
Which is a fine and robust design principle.

IE, as so often, decides to go and have a guess anyway. Their
unfortunate experience from IE3 of reading a size specification in em
units, which IE3 didn't understand, and assuming that therefore it
must have meant pixels, didn't seem to teach them anything.

This habit of reading any old broken rubbish and having a guess at
what it might mean - and unilaterally acting on the results of that
guess - are one of the features which makes it so insecure, for one
thing. And is another reason for saying that it rules itself out as a
WWW-conforming client.