How to do a coloured line

Discussion in 'HTML' started by Thibault, Oct 7, 2004.

  1. Thibault

    Thibault Guest

    Hello,

    I need to draw an horizontal, red-colored line. I thought <HR> was the right
    thing to use, but it doesn't seem to work in Opera, does it ? Is there any
    alternative way to do my line ? Perhaps by using a unique, red pixel with a
    huge WIDTH attribute ?
    Thanks for your help !

    Thibault
    Thibault, Oct 7, 2004
    #1
    1. Advertising

  2. Thibault

    brucie Guest

    In alt.html Thibault said:

    > I need to draw an horizontal, red-colored line. I thought <HR> was the right
    > thing to use, but it doesn't seem to work in Opera, does it ?


    of course it does.

    hr{color:red;background:red;height:1px;border:0;}


    --
    i t ' s t h e l i t t l e v o i c e s
    brucie, Oct 7, 2004
    #2
    1. Advertising

  3. Thibault

    Jan Faerber Guest

    brucie wrote:

    > In alt.html Thibault said:
    >
    >> I need to draw an horizontal, red-colored line. I thought <HR> was the
    >> right thing to use, but it doesn't seem to work in Opera, does it ?

    >
    > of course it does.
    >
    > hr{color:red;background:red;height:1px;border:0;}
    >
    >


    hm - why is it, that opera only accepts this combination?
    And what if you want to use <hr /> with XHTML 1.0?
    Can you use css then aswell?

    --
    Jan

    http://213.47.90.11
    Jan Faerber, Oct 7, 2004
    #3
  4. Thibault

    brucie Guest

    In alt.html Jan Faerber said:

    >> hr{color:red;background:red;height:1px;border:0;}


    > hm - why is it, that opera only accepts this combination


    browsers vary on how they apply styles to a <hr>. e.g. opera doesn't
    need 'color:red' but other browsers do or some don't need
    'background:red'. the solution i provided for the OP gives the most
    consistent styling across browsers.

    > And what if you want to use <hr /> with XHTML 1.0?


    no change

    > Can you use css then aswell?


    of course you can.


    --
    i t ' s t h e l i t t l e v o i c e s
    brucie, Oct 7, 2004
    #4
  5. Thibault

    Dylan Parry Guest

    As an authority on the subject, Jan Faerber proclaimed:

    >> hr{color:red;background:red;height:1px;border:0;}
    >>

    > hm - why is it, that opera only accepts this combination?


    Some browsers use the color value, whereas others use the background
    value. Just to make sure if works for all it is best to use both values.

    > And what if you want to use <hr /> with XHTML 1.0?
    > Can you use css then aswell?


    The CSS for <hr> and <hr /> is exactly the same. It makes no difference to
    the CSS whether you are using XHTML or HTML.

    --
    Dylan Parry
    http://webpageworkshop.co.uk - FREE Web tutorials and references
    Dylan Parry, Oct 7, 2004
    #5
  6. brucie <> wrote:

    > browsers vary on how they apply styles to a <hr>. e.g. opera doesn't
    > need 'color:red' but other browsers do or some don't need
    > 'background:red'. the solution i provided for the OP gives the most
    > consistent styling across browsers.


    We might even say that there is nothing that says that either color or
    background-color has any effect on rendering. That is, what is content
    (in the CSS sense) and what is background for a horizontal line?

    So while the technique currently works on most (or all?) graphic
    browsers, you can't really complain if a browser vendor chooses to
    implement <hr>, by default, as border around some empty content.

    This in turn suggests that it's better to use a bottom border for a
    preceding element, or a top border for the next element. In that case you
    would not use any HTML element like <hr> but instead make sure that the
    preceding or next element is a block element, e.g.

    <div style="border-bottom: solid red 1px">
    stuff preceding the line
    </div>
    stuff after the line

    This gives the extra option of using other border formatting, e.g.
    creating a dashed or outset border.

    On the other hand, if the line is meant to work as a separator between
    topics, or something, I would use

    <div style="border-bottom: solid red 1px">
    stuff preceding the line
    <hr style="display:none">
    </div>
    stuff after the line

    to create a fallback for non-CSS browsing.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Oct 7, 2004
    #6
  7. Thibault

    Sid Ismail Guest

    On Thu, 7 Oct 2004 13:28:09 +0200, "Thibault" <> wrote:

    : I need to draw an horizontal, red-colored line. I thought <HR> was the right
    : thing to use, but it doesn't seem to work in Opera, does it ?


    <hr style="color:red;">

    You can also use width, height, etc. See CSS specs:
    http://www.devguru.com/Technologies/css/quickref/css_index.html

    Sid
    Sid Ismail, Oct 8, 2004
    #7
  8. Thibault

    Jan Faerber Guest

    Jukka K. Korpela wrote:

    > <div style="border-bottom: solid red 1px">
    > stuff preceding the line
    > </div>
    > stuff after the line


    Can you do something css equivalent for IE with <hr>
    like with text .classname { writing-mode:tb-rl; } ... "<vr>" :)
    beside style="border-right: solid red 1px"?

    > <div style="border-bottom: solid red 1px">
    > stuff preceding the line
    > <hr style="display:none">
    > </div>
    > stuff after the line
    >
    > to create a fallback for non-CSS browsing.



    You mean a non-CSS supporting browser would show a horizontal line with
    <hr style="display:none;">?



    --
    Jan

    http://213.47.90.11
    Jan Faerber, Oct 10, 2004
    #8
  9. Thibault

    Mark Parnell Guest

    On Sun, 10 Oct 2004 15:05:00 GMT, Jan Faerber <>
    declared in alt.html:

    > You mean a non-CSS supporting browser would show a horizontal line with
    > <hr style="display:none;">?


    Yes - the 'style="display:none;"' bit is CSS, therefore if CSS isn't
    supported, the <hr> is still displayed.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    "Never drink rum&coke whilst reading usenet" - rf 2004
    Mark Parnell, Oct 11, 2004
    #9
  10. Thibault

    Jan Faerber Guest

    Mark Parnell wrote:


    > Yes - the 'style="display:none;"' bit is CSS, therefore if CSS isn't
    > supported, the <hr> is still displayed.



    Oh - yes - very good!



    --
    Jan

    http://213.47.90.11
    Jan Faerber, Oct 11, 2004
    #10
    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. Replies:
    2
    Views:
    349
  2. Venkat

    Coloured Buttons

    Venkat, Jun 30, 2003, in forum: HTML
    Replies:
    3
    Views:
    2,727
    Steve Pugh
    Jul 1, 2003
  3. Replies:
    9
    Views:
    347
    Geoffrey Clements
    Feb 2, 2007
  4. sudip

    coloured text...

    sudip, Jul 1, 2005, in forum: C Programming
    Replies:
    4
    Views:
    389
    Dik T. Winter
    Jul 7, 2005
  5. Rob Meade
    Replies:
    2
    Views:
    706
    Rob Meade
    Aug 14, 2007
Loading...

Share This Page