PDA

View Full Version : Defining HR size with CSS

Jeff122185
08-23-2002, 06:37 AM
I want to make my horizontal rule size be only 1 px, but what attribute would I use in CSS? I tried using height, but that didn't work. Thanks for any help.
boxer_1
08-23-2002, 06:45 AM
Here's an example of a couple of ways you could do this:

<html>
<head>
<title>Example</title>
<style type="text/css">
.rule {
width: 500px;
height: 1px;
}
</style>
</head>
<body>
<hr class="rule" />
<br />
OR
<br />
<hr size="1" width="500" />
</body>
</html>

Any help?
mouse
08-23-2002, 06:54 AM
<style type="text/css">
hr{
width:500px;
height:1px}
</style>

Saves specifying class on each one if all rule's are the same.
boxer_1
08-23-2002, 07:03 AM
Originally posted by mouse
<style type="text/css">
hr{
width:500px;
height:1px}
</style>

Saves specifying class on each one if all rule's are the same.

That would make thing one step easier :thumbsup: . Of course that is assuming that all of the <hr />s on the page / site (if external style sheet) are meant to be the same size, which is likely the case ;).
Jeff122185
08-23-2002, 07:32 AM
Oh hmm, ok it was working, but I guess 1 px isn't the size I wanted. I want the line to be thin like the lines that separate the different tables in this forum. (ex. that thin line that separates the box with your name and the box with your reply.) Is there a way to get it smaller than 1 px?
mouse
08-23-2002, 07:38 AM
Try using border-style: solid aswell, this takes the shading off the hr which might make it look thinner.
Jeff122185
08-23-2002, 07:42 AM
Didn't work, mouse. :(
The Wizzard
08-23-2002, 08:15 AM
Well, those are actually table cells...

Try this piece of code...

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Stuff above thin line...</td>
</tr>
<tr>
<td bgcolor="#000000" height="1"></td>
</tr>
<tr>
<td>Stuff below thin line...</td>
</tr>
</table>
mouse
08-23-2002, 08:39 AM
I think using a 1x1 gif would be better than using tables, that technique is so crude.
The Wizzard
08-23-2002, 09:14 AM
Yes that also works, but thats what I usually use... Tables are our friend :rolleyes:

hehe
Jeff122185
08-23-2002, 09:20 AM
Okay, the last idea works.
mouse
08-23-2002, 09:28 AM
Originally posted by The Wizzard
Yes that also works, but thats what I usually use... Tables are our friend :rolleyes:

hehe I'm confused as to why <div style="background:#ff0000;width:500px;height:1px"></div> doesn't work :confused: for some reason the height attribute is ignored...
La Gal
08-23-2002, 07:38 PM
mouse, a little tip I picked up from Brainjar recently - use overflow:hidden.

<div style="background:#ff0000;width:500px;height:1px;overflow:hidden;"></div>