How to make a thin horizontal (hair)line?

kippie · Feb 22, 2003

The command <hr> makes a horizontal line. Is there a command to make this line thinner? Or should I do it in another way>

Kippie

4x4uk · Feb 22, 2003

this might help you

<hr size="1">

regards
Ian It's not a lie if you believe it!

http://www.ne4x4.org.uk/

http://www.ne4x4.org.uk/Ian/

http://www.ne4x4.fsnet.co.uk/beck/

jemminger · Feb 22, 2003

use css:

<hr style="height:1px;border:1px solid black;"/>
=========================================================
if (!succeed) try();
-jeff

kippie · Feb 22, 2003

Thanks

Kippie

mleahy · Feb 24, 2003

Hi,

I am trying to get a CSS Hr tag to work in netscape. Does netscape support this style. It works in IE.

4x4uk · Feb 24, 2003

According to my info NN6 CSS1 is fully supported, CSS2 is partially implemented.
NN4, NN4.5/NN4.7 CSS1 is implemented but I'm not sure how much It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

jemminger · Feb 24, 2003

this should fix it:

<hr style="height:1px;border-width:1px 0px 0px 0px;"/>
=========================================================
if (!succeed) try();
-jeff

mwolf00 · Feb 24, 2003

Remember that you also have the option of using a 1 pixel gif for horizontal or vertical lines...

<img src="pix.gif" width=800 height=1>

Just make a one pixel gif from any image editing program in whatever color you desire.... Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048
Tek-Tips Best Practices: FAQ183-3179
mikewolf@tst-us.com (Do not email regarding this thread unless requested - I don't check this account regularly)

EdwardMartinIII · Feb 24, 2003

Hi Kippie,

There's a way to do this without using external files, although it requires that you do a bit of bookkeeping...

Take a look at this:

Code:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>JavaScript Sample</title>
  </head>
  <body>
    <p>A table below, with borders aplenty, but no graphic images</p>
    <table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
      <tr>
        <td colspan=&quot;11&quot; height=&quot;1&quot; bgcolor=&quot;#000000&quot;></td>
      </tr>
      <tr>
        <td bgcolor=&quot;#000000&quot; width=&quot;1&quot;></td>
        <td width=&quot;3&quot;></td>
        <td>a1</td>
        <td width=&quot;3&quot;></td>
        <td bgcolor=&quot;#000000&quot; width=&quot;1&quot;></td>
        <td width=&quot;3&quot;></td>
        <td>c1</td>
        <td>d1</td>
        <td>e1</td>
        <td width=&quot;3&quot;></td>
        <td bgcolor=&quot;#000000&quot; width=&quot;1&quot;></td>
      </tr>
      <tr>
        <td bgcolor=&quot;#000000&quot; width=&quot;1&quot;></td>
        <td width=&quot;3&quot;></td>
        <td>a2 </td>
        <td width=&quot;3&quot;></td>
        <td bgcolor=&quot;#000000&quot; width=&quot;1&quot;></td>
        <td width=&quot;3&quot;></td>
        <td> c2</td>
        <td>d2</td>
        <td>e2</td>
        <td width=&quot;3&quot;></td>
        <td bgcolor=&quot;#000000&quot; width=&quot;1&quot;></td>
      </tr>
      <tr>
        <td colspan=&quot;11&quot; height=&quot;1&quot; bgcolor=&quot;#000000&quot;></td>
      </tr>
    </table>
  </body>
</html>

Hairline horizontal AND vertical bars, plus you can make 'em any RGB color you prefer. I just picked black to impress goth chicks.

Good luck!
[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

4x4uk · Feb 24, 2003

Nice one It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

EdwardMartinIII · Feb 24, 2003

Thanks, Ian.

Kippie, making a horizontal line is, of course, just a matter of making a 1-row, 1-column table with a td color of whatever you like and a height of whatever you like. You can even do multiple rows if you want to do something fancy such as thick-thin-thick lines, simulating drop-shadow, etc.

Cheers,
[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

mleahy · Feb 25, 2003

Hi Guys,

This site is new to me but everyone has been great at replying to my problems. But I am still having a headache with CSS.

I have put this piece of code in an external CSS file
hr { color: FFCC33; }. I just want the Hr to be yellow in netscape (it does it IE). What am I doing wrong?

4x4uk · Feb 25, 2003

have you tried
hr{color:#FFCC33;}

I don't use netscape anymore so am unable to check it sorry
Regards
Ian It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

jemminger · Feb 25, 2003

no - "color" is for text color. use "background-color" instead

Edward - nice example with the tables, but can't you do the same thing with half the code using CSS?

[tt]<table align="center" cellspacing="0" cellpadding="2">
<tr>
<td style="border:2px solid red;">a1</td>
<td style="border:2px solid green;">b1</td>
</tr>
<tr>
<td style="border:2px solid blue;">a2</td>
<td style="border:2px solid cyan;">b2</td>
</tr>
</table>
[/tt]
=========================================================
if (!succeed) try();
-jeff

mwolf00 · Feb 25, 2003

From what I remember, netScape is not very receptive to css on HRs. I think you might be stuck with black unless you use one of the other suggestions above. Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048
Tek-Tips Best Practices: FAQ183-3179
mikewolf@tst-us.com (Do not email regarding this thread unless requested - I don't check this account regularly)

EdwardMartinIII · Feb 25, 2003

jemminger,

Actually, you can use even less if you spec it in an external stylesheet:

Code:

<table align=&quot;center&quot; cellspacing=&quot;0&quot; cellpadding=&quot;2&quot;>
    <tr>
        <td class=&quot;Rdot&quot;a1</td>
        <td class=&quot;GDot&quot;>b1</td>
    </tr>
    <tr>
        <td class=&quot;BDot&quot;>a2</td>
        <td class=&quot;CDot&quot;>b2</td>
    </tr>
</table>

Plus you get to keep using those classes again in the same document, plus you can use them in other documents. Can't do that using font-- er "inline styles".

I guess I tend to think of using CSS in external stylesheets or not at all (so my example avoided all style calls, which is a distinction I mentioned).

I'm a total fan of external files, external CSS, external JS, external anything-I-can-make-external. Centralized software is for Redmond startups... [smile]

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

jemminger · Feb 25, 2003

Edward,
i agree - i use .css and .js includes for 99% of my work too - just makes for quicker examples here to use inline

=========================================================
if (!succeed) try();
-jeff

mleahy · Apr 8, 2003

Hiya,

God sorry I am only replying now. I haven't been on this site in a while. If you type in size=1 within the <hr> tag this will make the line thinner.

furtivevole · Apr 11, 2003

Another technique I often use for very thin lines (however produced) is to make them light/mid grey rather than black. Keep the lines solid however: dotted effects can become very messy.

Linnet

jstreich · Apr 11, 2003

I like the table approach because it can make nice boxes, but for most uses the old hr tag is the way to go.

jeff, your sig "if (!succeed) try();" perhaps should be "while (!succeed) try();" That way any fail will work.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to make a thin horizontal (hair)line?

Technical User

Technical User

Programmer

Technical User

Technical User

Technical User

Programmer

Programmer

Technical User

Technical User

Technical User

Technical User

Technical User

Programmer

Programmer

Technical User

Programmer

Technical User

Technical User

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor