How to do a coloured line

[Thibault]

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

 

[brucie]

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;}

 

[Jan Faerber]

In alt.html Thibault said:


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?

 

[brucie]

In alt.html Jan Faerber said:

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.

 

[Dylan Parry]

As an authority on the subject, Jan Faerber proclaimed:

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.

 

[Jukka K. Korpela]

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.

 

[Sid Ismail]

: 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

 

[Jan Faerber]

<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>

<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;">?

 

[Mark Parnell]

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.

 

[Jan Faerber]

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!