<HR> Line Style 6

[Mighty]

Folks,

Is it possible to change the style of line that gets displayed using the <HR> tag. I would like to use the <HR> tag to display a dashed line. Mighty

 

[Boomerang]

Hi Mighty,

You can use a <div>:
works in IE5.5 and (I think NN6)

<div style=&quot;border-bottom: 1px dashed red;&quot;>&amp;nbsp;</div>

The &amp;nbsp; occurs that IE4.0 display's a solid line like a <hr>. Without the &amp;nbsp; IE4.0 displays nothing.

you can add the width:
<div style=&quot;border-bottom: 1px dashed green; width:400px&quot;>&nbsp;</div>

Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

 

[Mighty]

Thanks Erik - it worked a treat!! Mighty

 

[xutopia]

I give a star to boomerang as well! always knowns good tricks. Gary

http://www.xutopia.com

Haran

 

[Chopstik]

What if I wanted to add a line after each row in a table? I tried the <DIV> and it appears to work only before the table, not in the table. Is there another way to approach this? Thanks!

 

[Mighty]

Why not just set the border of the table to 1. The you would see a line after each row. If you only wanted a line below each row and not lines separating the columns, you could try the following:

<TABLE BORDER=1 FRAME=&quot;VOID&quot; RULES=&quot;rows&quot; STYLE=&quot;border: 1px dashed red&quot;>>
.
.
</TABLE>

or

<TABLE BORDER=0>
<TR>
<TD STYLE=&quot;border-bottom: 1px dashed red&quot;>Cell Text</TD>
.
.
</TD>
</TR>
</TABLE>

For the second instance to work for the entire row you will need to specify the border in every <TD> tag. Mighty

 

[Chopstik]

Thanks, Mighty. That second one worked!

 

[Boomerang]

I'm glad I could help Mighty. Thanks for the stars guys.

Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

 

[BobbaFet]

you can also just do this:

<hr style=&quot;color: yellow;&quot;>

same thing as boomerangs solution. BobbaFet

Everyone has a right to my opinion.
E-mail me at caswegkamp@hotmail.com

http://cwcon.50megs.com/

 

[Mighty]

BobbaFet,

This just gives you a yellow line - I wanted a dashed line, not a coloured line. Mighty

 

[BobbaFet]

Whoops I knew I should have read the intire thing lol

But try this on for size, it works for me:

<hr style=&quot;border: 1px dashed red;&quot;>

You have to give it a color, because like this its default
color is white. I like my solution a whole lot better since
it is

http://WWWAAAYYY

less code. Remember, almost all visible
components have a border.

Good luck, BobbaFet

Everyone has a right to my opinion.
E-mail me at caswegkamp@hotmail.com

http://cwcon.50megs.com/

 

[BobbaFet]

Sorry error in the code this is it:

<hr style=&quot;border: dashed red; height: 1px;&quot;>

Cheers, BobbaFet

Everyone has a right to my opinion.
E-mail me at caswegkamp@hotmail.com

http://cwcon.50megs.com/

 

[Mighty]

Thanks BobbaFet,

I think that I prefer that solution also. It works better in IE5. Mighty

 

[Boomerang]

Hi Bobbafet,

I agree that your solutions is OK if you only supports IE5 and NN6 (not tested by me) or higher. I think that it's even better/easyer if you want to specify the width in combination with a left/right-align:

<hr align=&quot;right&quot; style=&quot;border: dashed red; height: 1px; width:400px&quot;>

So a star for your solution Bobbafet. (I always like new tips)

But I disagree your &quot;

http://WWWAAAYYY

less code&quot;!!

[ignore]
<hr style=&quot;border: dashed red; height: 1px;&quot;>
<div style=&quot;border-bottom: 1px dashed red;&quot;>&nbsp;</div>

difference is only 11 characters
[/ignore]

Mighty,

Beware if you want your site to support people with older browsers. There are some disadvantages with bobbafet's solution:

In IE4
- You only see a grey line (OK, that's not to bad).
- {the <div> shows a colored line}
but in NN4.7
- You see a 3 demension grey line following by (next row) a verry annoying square with thick RED border.
- {the <div> shows nothing}

Good luck with making a choice.

Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

 

[Mighty]

Boomerang,

Thanks for the tips but the code is on an internal intranet site and we only have users with IE5 or greater - no Netscape users. So I know that the code will be OK. Mighty

 

[BobbaFet]

I wasnt reffering to the <div> code, I meant the code where
you used a <table> to do it. But I guess you figured that.

Greetings, BobbaFet

Everyone has a right to my opinion.
E-mail me at caswegkamp@hotmail.com

http://cwcon.50megs.com/

 

[BobbaFet]

Oh yeah, thanx for the stars !!! BobbaFet

Everyone has a right to my opinion.
E-mail me at caswegkamp@hotmail.com

http://cwcon.50megs.com/