hr

[Jeff Thies]

I've been thinking about styling hr's, for my own devious purposes.

I have something like this:
hr{
color: red;
margin: 0px
}

<img src=....>
<hr noshade size="4">
<div>content immediately below (navigation)</div>

In IE5 (windows), I get a red hr and am unable to control the space above or
below the hr.

in NS 7.1, I get a grey hr, no control over the margins

in Opera 7, I get a grey hr and the margins are now 0px

Setting padding or line-height has no effect in any of these browsers.

Which is correct? Can the hr be better styled?

Jeff

[Els]

Jeff Thies wrote:

I've been thinking about styling hr's, for my own devious purposes.

I have something like this:
hr{
color: red;
margin: 0px
}

<img src=....>
<hr noshade size="4">
<div>content immediately below (navigation)</div>

In IE5 (windows), I get a red hr and am unable to control the space above or
below the hr.

in NS 7.1, I get a grey hr, no control over the margins

in Opera 7, I get a grey hr and the margins are now 0px

Setting padding or line-height has no effect in any of these browsers.

Which is correct? Can the hr be better styled?

I remember I had probs like that on an old site I made, so I
just looked up how I styled it:
hr {
position: relative;
top: 0px;
left: 0px;
color: rgb(171,7,247);
background: rgb(171,7,247);
height:1px;
width: 759px;
border:none;
margin-top:0px;
margin-bottom:0px;
}

I noticed that the colour is only visible if the background
is the same color in some browsers. the grey, i think is the
default border color, or else, the background color. Don't
remember exactly, but anyway, this style gave me the hr I
wanted.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

[Barry Pearson]

Jeff Thies wrote:

I've been thinking about styling hr's, for my own devious purposes.

I have something like this:
hr{
color: red;
margin: 0px
}

<img src=....>
<hr noshade size="4">
<div>content immediately below (navigation)</div>

In IE5 (windows), I get a red hr and am unable to control the space
above or below the hr.

in NS 7.1, I get a grey hr, no control over the margins

in Opera 7, I get a grey hr and the margins are now 0px

Setting padding or line-height has no effect in any of these
browsers.

Which is correct? Can the hr be better styled?

I'll repeat what I recently posted to the macromedia.dreamweaver NG - I hope
it answers your question:

With CSS it is easy enough, at least with suitable browsers. I don't know how
to do it without CSS.

I use, for example, something like:

hr { height: 0; border-style: solid; border-width: 1px 0 0 0; border-color:
red; }

This makes it a 1-pixel horizontal red line. You could change solid to dotted,
dashed, etc; change 1px to 2px, 5px, etc; and change red to whatever you like.

(The reason for the complicated set of properties is that different browsers
implement hr in different ways, and you need to make sure all borders except
one are 0, and that the height is also 0. I expect someone will say there are
other things you have to do too!)

(You can also add margins (top and bottom) if you like, in the normal way).

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

[Neal]

On Tue, 10 Feb 2004 10:06:06 GMT, Jeff Thies <no****@nospam.net> wrote:

hr{
color: red;
margin: 0px
}

<img src=....>
<hr noshade size="4">
<div>content immediately below (navigation)</div>

My solution:

<div class="hr"><hr class="hidden" /></div>

..hr {
width: 100%;
border-bottom: 5px inset red;
}

..hidden {
display: none;
}

If you have divs already, use them instead. Put the hr at the end to give
a visual cue to the reader of the unstyled page, and set the bottom border
to act as a divider.

[Jukka K. Korpela]

"Jeff Thies" <no****@nospam.net> wrote:

I've been thinking about styling hr's, for my own devious purposes.

Sounds too complicated. Why not use just border-bottom or border-top
for some real content element?

Admittedly <hr> servers some useful purpose in non-CSS browsing
situations. But you could use the simple approach and add <hr> at the
proper place and
hr { display: none; }
into the style sheet.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Jeff Thies]

Thanks to all!

It looks like the consensus is to style the border of the hr and
"dissolve" the hr.

It also looks like the most reasonable way to set the the top and bottom
margins is to set margins on the adjoining elements.

I wonder if it's possible to set a zIndex for an hr by setting it position:
relative, and tinkering with neighboring conatiners?

Cheers,
Jeff

hr{
color: red;
margin: 0px
}

<img src=....>
<hr noshade size="4">
<div>content immediately below (navigation)</div>

In IE5 (windows), I get a red hr and am unable to control the space above or below the hr.

in NS 7.1, I get a grey hr, no control over the margins

in Opera 7, I get a grey hr and the margins are now 0px

Setting padding or line-height has no effect in any of these browsers.

Which is correct? Can the hr be better styled?

Jeff

[Barry Pearson]

Jeff Thies wrote:

Thanks to all!

It looks like the consensus is to style the border of the hr and
"dissolve" the hr.

It also looks like the most reasonable way to set the the top and
bottom margins is to set margins on the adjoining elements.

[snip]

Setting top and bottom margins works reasonably well in IE 5, IE 6, Opera 7.2,
Netscape 7.1, and Firefox 0.8. Big numbers create extra space round the hr.

However, I wonder if part of the problem is that adjoining elements will have
their own top and bottom margins, and it depends on how browsers default these
and collapse them together? I think different browsers have different defaults
for different types of elements. (Adjoining vertical margins are not supposed
to add up, but the largest is used). This could cause some confusion, making
it appear that margins on the hr are not working properly.

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