1px high hr

I need to make a 1px high divider, I'd prefer to use an hr.

I notice that the Safari behaviour is different than IE and Firefox.

Is there a way to do this in Safari, or do I need to style a div.

I seem to recall some discussion on setting hr borders, but I don't
remember the details and didn't make notes on that.

Jeff

Jeff wrote:

I need to make a 1px high divider, I'd prefer to use an hr.

Why? Just use the border property on one of the elements, i.e.

h2 {border-top:1px solid}

--
Berg

Bergamot wrote:

Jeff wrote:
I need to make a 1px high divider, I'd prefer to use an hr.

Why? Just use the border property on one of the elements, i.e.

h2 {border-top:1px solid}

Complex whitespace in a complex form with no nearby elements, but I
did what you suggested with an empty div. Otherwise good advice.

Jeff

Bergamot wrote:

Jeff wrote:
I need to make a 1px high divider, I'd prefer to use an hr.

Why?

I have no idea why Jeff wants that, but <hr> logically means "change of
topic".

Just use the border property on one of the elements, i.e.

h2 {border-top:1px solid}

What would you do in situation where a change of topic is to be indicated,
e.g. before some remarks on a page at the very end? Using a heading for some
short info like author name and date of update would look odd. Using <hr>,
with optional styling, looks suitable.

If you used just a top border for a <div> (or <p> or <address>) for example,
there would be no indication of the change of topic - such as from page
content proper to "administrativia" - when CSS is off or overridden.

However, styling <hr> well is really tricky, as discussions over the year
have shown. A simple, though not quote clean markup-wise, approach is to use

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

with

div.hr hr { display: none; }

and any desired border styling for the div.hr element.

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

Jukka K. Korpela wrote:

Bergamot wrote:
Jeff wrote:
I need to make a 1px high divider, I'd prefer to use an hr.
Why?

I have no idea why Jeff wants that, but <hr> logically means "change of
topic".

He did not put it in context, which is one reason I asked: why?
His divider doesn't necessarily mean a change of topic.

Just use the border property on one of the elements, i.e.

h2 {border-top:1px solid}

What would you do in situation where a change of topic is to be indicated,
e.g. before some remarks on a page at the very end? Using a heading for some
short info like author name and date of update would look odd.

Why would you need to add another heading? Put the border on a
containing <p>, <div> or whatever.

Using <hr>,
with optional styling, looks suitable.

The problem I have with hr is that once you start using it, you should
use it *everywhere* there is any change in topic. If the OP uses one in
the middle of his page, just to separate a couple form fields (as he
mentioned in another post), if they are not enclosed within the same
fieldset he should also add hr to other places in the page such as where
the form begins and ends. Otherwise the page is sectioned off illogically.

I see hr as outdated markup and mostly clutter. Yeah, it may look swell
in Lynx but I think the hr is unnecessary.

However, styling <hr> well is really tricky, as discussions over the year
have shown. A simple, though not quote clean markup-wise, approach is to use

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

Reminiscent of Alan J. Falvell's decorative hr:
http://www.alanflavell.org.uk/www/hrstyle.html

--
Berg

Bergamot wrote:

Jukka K. Korpela wrote:
Bergamot wrote:
Jeff wrote:
I need to make a 1px high divider, I'd prefer to use an hr.
Why?

I have no idea why Jeff wants that, but <hr> logically means "change
of topic".

He did not put it in context, which is one reason I asked: why?
His divider doesn't necessarily mean a change of topic.

Hey, I don't design these. I just implement them as cleanly as I can
from a photoshop comp. We've endlessly been through the reasons why I do
that but it has to look like the comp.

You won't like this, it requires javascript to toggle the form (click
a radio button). I'll add the fieldsets later.

http://ematings.com/sign_up.html

I thought it made sense to use an hr to separate the two sections of
the form. Now I rarely rarely use hr's and this seemed like a good
place for it, I appear to be wrong.

(Drove me crazy making a form without a table.)

Jeff

Just use the border property on one of the elements, i.e.

h2 {border-top:1px solid}

What would you do in situation where a change of topic is to be
indicated, e.g. before some remarks on a page at the very end? Using
a heading for some
short info like author name and date of update would look odd.

Why would you need to add another heading? Put the border on a
containing <p>, <div> or whatever.

Using <hr>, with optional styling, looks suitable.

The problem I have with hr is that once you start using it, you should
use it *everywhere* there is any change in topic. If the OP uses one in
the middle of his page, just to separate a couple form fields (as he
mentioned in another post), if they are not enclosed within the same
fieldset he should also add hr to other places in the page such as where
the form begins and ends. Otherwise the page is sectioned off illogically.

I see hr as outdated markup and mostly clutter. Yeah, it may look swell
in Lynx but I think the hr is unnecessary.

However, styling <hr> well is really tricky, as discussions over the
year have shown. A simple, though not quote clean markup-wise,
approach is to use

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

Reminiscent of Alan J. Falvell's decorative hr:
http://www.alanflavell.org.uk/www/hrstyle.html

In article <OPKdnSzEKYKNq97UnZ2dnUVZ_qzinZ2d (AT) earthlink (DOT) com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

I thought it made sense to use an hr to separate the two sections of
the form. Now I rarely rarely use hr's and this seemed like a good
place for it, I appear to be wrong.

It is not entirely clear that you are wrong. If the HR element has
bounced between presentation (just a line) and semantic interpretations
(change of topic, section change), you could use it on the ground that
it perfectly mirrors the slight uncertainty surrounding the separation
of your two sections of form.

You could just use a nice gif and be done! Compensate for your crime by
simply making sure that if the image failed to appear at all, the alt
would appear as something like "form section separator". Further, you
could make the form sections so clearly labelled that no one would be
confused as long as perhaps the second section followed the first (as
compared to it being upside down on an unrelated page somewhere else).

--
dorayme

dorayme wrote:

You could just use a nice gif and be done!

If you want a decorative separator instead of <hr>, a background image with
repeat-x is usually a better idea than a content image.

Compensate for your crime
by simply making sure that if the image failed to appear at all, the
alt would appear as something like "form section separator".

There are so many alt attributes that are bogus that I sometimes hope there
would be a compulsory examination before you are allowed to write one.

Would you really want to hear the words "form section separator" if you were
filling out a form using a speech and keyboard based user agent? It's almost
as foolish as having to listen to "separator icon" or "red bullet" between
links or "decorative image" here and there.

Using <hr> would at least give such user agents a chance to work well, e.g.
using the method suggested in HTML specs (a suitable pause) and perhaps
giving the user optional access to the string in the title="..." attribute.

Further,
you could make the form sections so clearly labelled that no one
would be confused as long as perhaps the second section followed the
first (as compared to it being upside down on an unrelated page
somewhere else).

As a rule of thumb, a form that needs sections needs to be divided into two
or more forms, typically on separate pages, chained together carefully.

And you have sections in a form, they should normally have headings, like
"Address information" and "Special requests". Then no divider - visual or
logical - is needed.

But if you think that headings are not appropriate (and sometimes the
structure of the content is too obvious to justify headings!), then why not
separate sections with <hr>? Then you could use markup like

<div class="hr"><hr title="Next: special requests"></div>

with

div.hr hr { display: none; }
div.hr { border-top: solid 1px black; }

or maybe, say,

div.hr hr { display: none; }
div.hr { height: 6px; background: url(foo.gif) repeat-x; }

if you wish to use a row of nice 6px tall images foo.gif as the separator.

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

In article <KWP0l.104592$_03.81130 (AT) reader1 (DOT) news.saunalahti.fi>,
"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote:

dorayme wrote:

You could just use a nice gif and be done!

If you want a decorative separator instead of <hr>, a background image with
repeat-x is usually a better idea than a content image.

Compensate for your crime
by simply making sure that if the image failed to appear at all, the
alt would appear as something like "form section separator".

There are so many alt attributes that are bogus that I sometimes hope there
would be a compulsory examination before you are allowed to write one.

My observations about alt text is that no one would pass the exam if
*everyone else* was on the examination board.

Would you really want to hear the words "form section separator" if you were
filling out a form using a speech and keyboard based user agent? It's almost
as foolish as having to listen to "separator icon" or "red bullet" between
links or "decorative image" here and there.

You are right. I take it back (though I don't really want the stinking
thing). If you do use an image, not background, better to alt="" and
rely on other things in the page to not confuse users about the
distinctiveness of the before and after the gif. The gif might be a
simple extra, not hugely necessary. Perhaps better still is work a
background image in. If you can do this without introducing an extra
element or *needing* to, I reckon this is better still.

Using <hr> would at least give such user agents a chance to work well...

Yes. Still, it is probably almost always possible to make do without
anything special as separator. Normal borders and margins, headings and
context should be enough. Perhaps it could be said that if you are
really *needing* to tell the user somehow explicitly that a section is
ended and new one is beginning, you have already gone wrong in design.

--
dorayme

Jeff wrote:

(Drove me crazy making a form without a table.)

I often use tables for forms. Forms can be tabular, so a table makes sense.

--
Berg