Inline <hr>

[Exuro]

I was messing around with applying some different CSS properties to the <hr> element, and I was trying to get them so that you could have more than one on a line. I tried using the display:inline property, but that doesn't work in IE. Anyone have any ideas???

[DaveSW]

Can you explain a bit more please?

[hastx]

Do you mean like having 2 or 3 lined up horizontally on the same line with different properties?

[DaveSW]

You could try a span - width 50% height 2px. and then another span etc.

[Exuro]

Okay, what I did was made the <hr>s 2px wide and 1em tall. I wanted to have like 5 of them on the same line separating a bunch of text. Unfortunately, <hr> has an automatic line break before and after it, so it isn't working. I wanted to know if there was a way to get rid of that line break with CSS.

[DaveSW]

absolute positioning?

[David Harrison]

Absolute positioning won't work because different browsers leave different spaces above the hr before the hr itself. I say spaces because it isn't a margin or border as I set them to 0 to try and get rid of it but it didn't work.
I tried putting them in a div and positioning that and that worked in IE and Opera but not Netscape, it still had the space.

[Kr|Z]

Create the lines with a table instead

[nkaisare]

You may want to use an image instead. Don't add 5 <hr>, sematically they make no sense.

[toicontien]

If you really want to use HR's, you should be able to modify the padding and margins using CSS. I've attached a file with an example. I was able to get rid of the line breaks after the HRs.

Lemme know if that's what you're after.

[David Harrison]

erm... you might want to work on your script a little:

* IE 6 just display's the text, then on a new line an hr then on a new line another hr etc.

* Opera 7 just display's the text and nothing else.

* Netscape 7 display's the text by itself and joins the hr's end to end on another line.