Click here to get back home

forcing two hr on the same line
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
forcing two hr on the same line cocco 01-05-2007
Posted by cocco on January 5, 2007, 10:22 am
Please log in for more thread options

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.


Posted by Andy Dingley on January 5, 2007, 11:58 am
Please log in for more thread options


cocco@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 <hr> with <div> and 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>


Posted by RobG on January 9, 2007, 1:14 am
Please log in for more thread options


Andy Dingley wrote:
> cocco@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 <hr> with <div> and making them tiny but
> with a visible top border.

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

[...]

--
Rob


Posted by Jukka K. Korpela on January 5, 2007, 4:39 pm
Please log in for more thread options


Scripsit cocco@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/


Similar ThreadsPosted
Forcing adjacent elements to have the same height May 17, 2005, 11:28 pm
Small Screen Rendering : Forcing It March 10, 2007, 10:20 pm
forcing ie to save the contents of the html instead of displaying it September 9, 2005, 5:47 pm
Forcing retrieval of a fresh copy of a file with a link May 30, 2008, 8:47 am
How to keep this on one line? May 9, 2007, 4:39 pm
DIV without line breaks June 22, 2005, 4:37 pm
Button on the same line. July 20, 2005, 12:48 pm
Line dividers December 29, 2005, 11:31 am
images on URL line March 2, 2007, 8:31 pm
best way to set line width July 28, 2007, 11:10 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap