<HL> deprecated?

Discussion in 'HTML' started by Paul Furman, Feb 15, 2004.

  1. Paul Furman

    Paul Furman Guest

    Paul Furman, Feb 15, 2004
    #1
    1. Advertising

  2. Paul Furman wrote:

    > Horizontal line <HL> is probably another taboo html tag.


    I think you mean <hr>, horizontal rule.

    > Is there another simple alternative with css rendering or something?


    border-*

    --
    David Dorward <http://dorward.me.uk/>
    David Dorward, Feb 15, 2004
    #2
    1. Advertising

  3. Paul Furman wrote:

    > Subject: <HL> deprecated?


    No, it's not been deprecated in any version of HTML yet. It looks like
    it's still going to be there in XHTML 2 too.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Feb 15, 2004
    #3
  4. Paul Furman

    Paul Furman Guest

    Re: <HR> deprecated?

    David Dorward wrote:

    > Paul Furman wrote:
    > probably another taboo html tag.
    >
    >
    > I think you mean <hr>, horizontal rule.



    Doh!
    So the HTML spec says it's OK to use but to use CSS to set it's display
    properties. I can't find where the css spec would explain that. Border
    properties add a border around the

    I want this (doesn't work):
    <hr width=100% style="size: 1px; color: #339966;">
    but this is the closest that works:
    <hr width=100% size="1" style="color: #339966;">
    but that doesn't give me a 1 pixel thickness in Mozilla, I get the 3D
    effect.


    >
    >>Is there another simple alternative with css rendering or something?

    >
    >
    > border-*



    So maybe border-bottom applied to a div is a better way to do it? What I
    really want is the line to follow <a> link properties for hover. But
    since I can't do that, I'm making it the hover green color which looks
    OK moused or not:
    http://hills.ccsf.edu/~pfurma02
    Maybe a border could be given <a> properties?
    Paul Furman, Feb 15, 2004
    #4
  5. Paul Furman

    Els Guest

    Re: <HR> deprecated?

    Paul Furman wrote:

    > I want this (doesn't work):
    > <hr width=100% style="size: 1px; color: #339966;">
    > but this is the closest that works:
    > <hr width=100% size="1" style="color: #339966;">
    > but that doesn't give me a 1 pixel thickness in Mozilla, I get the 3D
    > effect.
    >
    >>> Is there another simple alternative with css rendering or something?


    Yes: you have to set the border to none, and the
    background-color to the same color as the color.

    Like this:
    hr {
    color: #339966;
    background: #339966;
    height:1px;
    width: 100%;
    border:none;
    margin-top:0px;
    margin-bottom:0px;
    }

    > So maybe border-bottom applied to a div is a better way to do it?


    Some people say it is.

    > What I
    > really want is the line to follow <a> link properties for hover. But
    > since I can't do that, I'm making it the hover green color which looks
    > OK moused or not:
    > http://hills.ccsf.edu/~pfurma02
    > Maybe a border could be given <a> properties?


    No, but the div can be given <a> properties :)
    Like this code here:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <title>hovering over div border</title>
    <style>

    * {border:0px;}
    /* these link styles are necessary to make the link styles
    apply to the div later on */
    a:link {color: #339966;}
    a:visited {color: #339966;}
    a:hover {color: #123456;}

    /* without height for the div, there's nothing to hover */
    div {height:1px;}

    a:link div {border-bottom: 10px solid #339966;}
    a:visited div {border-bottom: 10px solid #339966;}
    a:hover div {border-bottom: 10px solid #123456;}

    </style>
    </head>
    <body>
    <a href="#">
    <div>
    </div>
    </a>
    </body>
    </html>


    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 15, 2004
    #5
  6. Paul Furman

    Spartanicus Guest

    Re: <HR> deprecated?

    Paul Furman <> wrote:

    >I want this (doesn't work):
    ><hr width=100% style="size: 1px; color: #339966;">


    div.hr{border-bottom:1px solid #339966}
    div hr{display:none}

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

    Usage of the <hr> is optional.

    --
    Spartanicus
    Spartanicus, Feb 15, 2004
    #6
  7. Paul Furman

    Els Guest

    Re: <HR> deprecated?

    Els wrote:

    Uploaded an example:

    http://home.tiscali.nl/~elizabeth/Paul.html

    And I said it wrong: the div can't be given <a> properties,
    but you can put the <div> inside an <a> element.
    Effect as desired, though.

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 15, 2004
    #7
  8. Beauregard T. Shagnasty, Feb 15, 2004
    #8
  9. Paul Furman

    Els Guest

    Re: <HR> deprecated?

    Beauregard T. Shagnasty wrote:

    > Quoth the raven named Els:
    >
    > > but you can put the <div> inside an <a> element.

    >
    > Hmmm? I don't think so... <g>


    Yes, you can :-D
    You're not allowed to :-(
    Sorry, didn't check beforehand. But it works in Moz, NS,
    Opera, IE, ...

    Any other inline element with borders that might replace the
    div?

    How about this one then?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <title>hovering over 'hr'</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=ISO-8859-1">
    <style type="text/css">

    * {border:0px;}

    a:link {color: #339966;}
    a:visited {color: #339966;}
    a:hover {color: #123456;}

    a:link hr {height:10px; color: #339966; background-color:
    #339966;}
    a:visited hr {height:10px; color: #339966; background-color:
    #339966;}
    a:hover hr {height:10px; color: #123456; background-color:
    #123456;}

    </style>
    </head>
    <body>
    <p>
    <a href="#">
    <hr>
    </a>
    </p>
    </body>
    </html>

    Uploaded again:
    http://home.tiscali.nl/~elizabeth/Paul.html

    It's still not valid, the validator now keeps complaining
    that it needs a start-tag of one of these:"APPLET",
    "OBJECT", "MAP", "IFRAME", "BUTTON".

    Can anyone tell me why?


    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 15, 2004
    #9
  10. Paul Furman

    Paul Furman Guest

    Re: <HR> deprecated?

    Els wrote:
    >
    >> the div can be given <a> properties :)
    >> http://home.tiscali.nl/~elizabeth/Paul.html



    Beauregard T. Shagnasty wrote:
    >
    > "Error: element A not allowed here; possible cause is an inline element
    > containing a block-level element"


    So you can't nest a div in an a-href. Hmph.

    >> /* without height for the div, there's nothing to hover */
    >> div {height:1px;}



    I tried using (an inline) span instead of div but it wouldn't appear
    without text and even then is only as wide as the text.


    Supposed to look like this all in one link that hover-blinks in unison:


    left text
    ------------------------------------
    centered text



    <a href="#">

    <span class="left">
    left text
    </span>

    <br>

    <span class="line">
    (actually no text, just looks like a line)
    </span>

    <br>

    <span class="center">
    centered text
    </span>

    </a>
    Paul Furman, Feb 15, 2004
    #10
  11. Paul Furman

    Paul Furman Guest

    Re: <HR> deprecated?

    OK this works. I don't know if it validates.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <title>hovering over div border</title>
    <style>

    * {border:0px;}
    /* these link styles are necessary to make the link styles apply to the
    div later on */
    a:link {color: #339966;}
    a:visited {color: #339966;}
    a:hover {color: #123456;}

    a:link hr {height:1px; color: #339966; background-color: #339966;}
    a:visited hr {height:1px; color: #339966; background-color: #339966;}
    a:hover hr {height:1px; color: #123456; background-color: #123456;}


    </style>
    </head>
    <body>
    <a href="#">

    <span class="left">
    left text
    </span>

    <hr>

    <span class="center">
    centered text
    </span>

    </a>
    </body>
    </html>
    Paul Furman, Feb 15, 2004
    #11
  12. Paul Furman

    kayodeok Guest

    Re: <HR> deprecated?

    Paul Furman <> wrote in
    news::

    > So the HTML spec says it's OK to use but to use CSS to set it's
    > display properties. I can't find where the css spec would
    > explain that. Border properties add a border around the
    >
    > I want this (doesn't work):
    > <hr width=100% style="size: 1px; color: #339966;">
    > but this is the closest that works:
    > <hr width=100% size="1" style="color: #339966;">
    > but that doesn't give me a 1 pixel thickness in Mozilla, I get
    > the 3D effect.


    This website has some observations on styling <hr> though I am not
    sure if it's what you want:

    Styling <hr>
    http://www.sovavsiti.cz/css/hr.html

    --
    Kayode Okeyode
    http://www.kayodeok.co.uk/weblog/
    http://www.kayodeok.btinternet.co.uk/favorites/webdesign.htm
    kayodeok, Feb 15, 2004
    #12
  13. Paul Furman

    Els Guest

    Re: <HR> deprecated?

    Paul Furman wrote:

    > OK this works. I don't know if it validates.
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <head>
    > <title>hovering over div border</title>
    > <style>
    >
    > * {border:0px;}
    > /* these link styles are necessary to make the link styles apply to the
    > div later on */
    > a:link {color: #339966;}
    > a:visited {color: #339966;}
    > a:hover {color: #123456;}
    >
    > a:link hr {height:1px; color: #339966; background-color: #339966;}
    > a:visited hr {height:1px; color: #339966; background-color: #339966;}
    > a:hover hr {height:1px; color: #123456; background-color: #123456;}
    >
    >
    > </style>
    > </head>
    > <body>
    > <a href="#">
    >
    > <span class="left">
    > left text
    > </span>
    >
    > <hr>
    >
    > <span class="center">
    > centered text
    > </span>
    >
    > </a>
    > </body>
    > </html>


    It doesn't, because you still have the <hr> inside the <a>
    element.
    But I found a way:
    Just pick any small gif for the image.
    Uploaded again:

    http://home.tiscali.nl/~elizabeth/Paul.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <title>hovering over 'hr'</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=ISO-8859-1">
    <style type="text/css">

    * {border:0px;}

    a:link {color: #339966; text-decoration:none;}
    a:visited {color: #339966;text-decoration:none;}
    a:hover {color: #123456;text-decoration:none;}

    a:link img {border-bottom:5px solid #339966;}
    a:visited img {border-bottom:5px solid #339966;}
    a:hover img {border-bottom:5px solid #123456;}

    div {text-align:center;}

    ..left {position:absolute; left:10px;}

    img {height:0px;width:100%;}
    </style>
    </head>
    <body>
    <div>
    <a href="#">
    <span class="left">
    Left aligned text</span>
    <br>
    <img src="hr.gif" alt="">
    Centered text
    </a>
    </div>
    </body>
    </html>


    :-D

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 15, 2004
    #13
  14. Re: <HR> deprecated?

    Quoth the raven named Els:

    > Beauregard T. Shagnasty wrote:
    >
    >> Quoth the raven named Els:
    >>
    >> > but you can put the <div> inside an <a> element.

    >>
    >> Hmmm? I don't think so... <g>

    >
    > Yes, you can :-D
    > You're not allowed to :-(
    > Sorry, didn't check beforehand. But it works in Moz, NS, Opera, IE, ...


    Try it with a strict doctype?

    > Any other inline element with borders that might replace the div?
    >
    > How about this one then?

    ....

    > <p>
    > <a href="#">
    > <hr>
    > </a>
    > </p>


    > It's still not valid, the validator now keeps complaining that it needs
    > a start-tag of one of these:"APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON".
    >
    > Can anyone tell me why?


    Isn't an <hr> a block-level element as well? Block elements aren't
    allowed inside anchors, or other inline elements.

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Feb 15, 2004
    #14
  15. Paul Furman

    Els Guest

    Re: <HR> deprecated?

    Beauregard T. Shagnasty wrote:

    > Quoth the raven named Els:
    >
    >> Beauregard T. Shagnasty wrote:
    >>
    >>> Quoth the raven named Els:
    >>>
    >>> > but you can put the <div> inside an <a> element.
    >>>
    >>> Hmmm? I don't think so... <g>

    >>
    >> Yes, you can :-D
    >> You're not allowed to :-(
    >> Sorry, didn't check beforehand. But it works in Moz, NS, Opera, IE, ...

    >
    > Try it with a strict doctype?


    That's what I started with

    >> <p>
    >> <a href="#">
    >> <hr>
    >> </a>
    >> </p>

    >
    >> It's still not valid, the validator now keeps complaining that it
    >> needs a start-tag of one of these:"APPLET", "OBJECT", "MAP", "IFRAME",
    >> "BUTTON".
    >>
    >> Can anyone tell me why?

    >
    > Isn't an <hr> a block-level element as well?


    Apparently :)

    > Block elements aren't
    > allowed inside anchors, or other inline elements.


    I noticed :-(


    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 15, 2004
    #15
  16. Paul Furman

    Paul Furman Guest

    Re: <HR> simple linked line working now

    Thanks all!

    This is what I'm using on the actual page and it works well:

    a hr {height:1px; width: 100%; border: 0;}
    a:link hr {color: #444444; background-color: #444444;}
    a:visited hr {color: #444444; background-color: #444444;}
    a:hover hr {color: #339966; background-color: #339966;}
    a:active hr {color: #444444; background-color: #444444;}
    Paul Furman, Feb 15, 2004
    #16
  17. Paul Furman

    Els Guest

    Re: <HR> simple linked line working now

    Paul Furman wrote:

    > Thanks all!
    >
    > This is what I'm using on the actual page and it works well:
    >
    > a hr {height:1px; width: 100%; border: 0;}
    > a:link hr {color: #444444; background-color: #444444;}
    > a:visited hr {color: #444444; background-color: #444444;}
    > a:hover hr {color: #339966; background-color: #339966;}
    > a:active hr {color: #444444; background-color: #444444;}


    But it doesn't validate :)

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 15, 2004
    #17
  18. Paul Furman

    Paul Furman Guest

    Re: <HR> deprecated?

    Els wrote:

    > Beauregard T. Shagnasty wrote:
    >
    >>
    >> Isn't an <hr> a block-level element as well?

    >
    >
    > Apparently :)



    Well, that's just dumb. It's a line not a container. I vote that they
    change it <g>.
    Paul Furman, Feb 15, 2004
    #18
  19. Paul Furman

    Els Guest

    Re: <HR> deprecated?

    Paul Furman wrote:

    > Els wrote:
    >
    >> Beauregard T. Shagnasty wrote:
    >>
    >>> Isn't an <hr> a block-level element as well?

    >>
    >> Apparently :)

    >
    > Well, that's just dumb. It's a line not a container. I vote that they
    > change it <g>.


    :-D

    You have my vote too ;-)

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 15, 2004
    #19
  20. Paul Furman

    Paul Furman Guest

    Re: <HR> simple linked line working now

    Els wrote:
    >
    > But it doesn't validate :)



    Bah!

    Why shouldn't I be able to wrap an a-href around a whole section of a
    page if I want to? They are just being silly, there's no reason for it.
    Paul Furman, Feb 15, 2004
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Barney Barumba
    Replies:
    0
    Views:
    552
    Barney Barumba
    Jul 23, 2003
  2. david
    Replies:
    4
    Views:
    6,307
    david
    Oct 9, 2003
  3. David McDivitt

    deprecated getResources method

    David McDivitt, May 18, 2004, in forum: Java
    Replies:
    2
    Views:
    1,864
    David McDivitt
    May 19, 2004
  4. Bernd Oninger
    Replies:
    1
    Views:
    405
    GIMME
    Jun 10, 2004
  5. kaeli
    Replies:
    3
    Views:
    4,881
    Eric Sosman
    Aug 24, 2004
Loading...

Share This Page