forcing two hr on the same line

[cocco]

I'm trying to have several <hr>, all on the same line, even if this can
seem a nonsense, with the shortest code.
So, I do not want to use abolute positioning and virtual div.

Is it possible to obtain such for the following html code:

<hr style="width: 20px;">
<hr style="width: 20px;">
<hr style="width: 20px;">
<hr style="width: 20px;">

with some css? The following css does not work:

hr {
display: inline;
float: left;
}

and the same for the following one:

hr {
line-height: 0;
}

Thanks for your help.

[Andy Dingley]

co***@mailinator.com wrote:

I'm trying to have several <hr>, all on the same line

Just floating them ought to work. As is well known, IE wants to see an
explicit width on floated things, but you already have that. You
shouldn't need the display:inline;, floating alone is adequate.

As it clearly doesn't work under IE7, I think it's another IE bug. It's
known to be weird with <hr>. If it matters to you, I suggest
pragmatically replacing the <hrwith <divand making them tiny but
with a visible top border.

You'll want somethign after them to clear the float too
..hr {
float: left;
width: 20px;
/* If you don't have some margin too,
what's the difference from using a single 80px wide <hr? */
margin: 0 10px;
}

div.hr {
border-top: thin solid black;
}

[...]

<div class="hr" </div>
<div class="hr" </div>
<div class="hr" </div>
<div class="hr" </div>
<div style="clear: both; float: none; height: 0; margin: 0; padding:
0;" ></div>

[Jukka K. Korpela]

Scripsit co***@mailinator.com:

I'm trying to have several <hr>, all on the same line, even if this
can seem a nonsense, with the shortest code.

The structural meaning of <hr>, if any, is 'change of topic'. Why would
would you change topic several times on the same line? And why would the
shortness of code matter? If this is a stupid contest, you should have told
that. (In that case, I might have wished to help you win it. But now you
asked it as if it were a serious question.)

I suspect what you actually want is a particular visual effect. Why don't
you describe the effect, illustrate the context with a URL, and ask in
c.i.w.a.stylesheets then?

So, I do not want to use abolute positioning and virtual div.

That's your privilege (or contest rules?), but by excluding possibilities,
you're not making things any easier.

Is it possible to obtain such for the following html code:

- -

with some css?

This group is about HTML, not CSS.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[RobG]

Andy Dingley wrote:

co***@mailinator.com wrote:

I'm trying to have several <hr>, all on the same line

Just floating them ought to work. As is well known, IE wants to see an
explicit width on floated things, but you already have that. You
shouldn't need the display:inline;, floating alone is adequate.

As it clearly doesn't work under IE7, I think it's another IE bug. It's
known to be weird with <hr>. If it matters to you, I suggest
pragmatically replacing the <hrwith <divand making them tiny but
with a visible top border.

Or drop the DIV border and put HR elements inside (appropriately
positioned) DIVs.

[...]

--
Rob