making block inline collapses its width

[Haines Brown]

I know I'm missing something obvious. I need a short horizontal rule
to preceed a line of text (in a bibliography in which the author is
repeated). I tried this:

<p>
<div class="rule"></div>, Title of book ...
</p>

style:

div.rule {
display: inline;
border-bottom: thin solid black;
height: 1pt; width: 8em;
}

Why does "display: inline" cause this div's width definition to be
ignored?

--

Haines Brown, KB1GRM

[zzpat]

Haines Brown wrote:

I know I'm missing something obvious. I need a short horizontal rule
to preceed a line of text (in a bibliography in which the author is
repeated). I tried this:

<p>
<div class="rule"></div>, Title of book ...
</p>

style:

div.rule {
display: inline;
border-bottom: thin solid black;
height: 1pt; width: 8em;
}

Try:

div.rule {
border-bottom: thin solid black;
width: 8em;
}
p.title {
position: relative;
top: -2em;
left: 8em;
}

[Andy Dingley]

On 4 Apr, 13:56, Haines Brown <[e-mail]:

I need a short horizontal rule

Then use <hrand tweak it with CSS

Don't put <divinside <peither.

[Ben C]

On 2007-04-04, Haines Brown <br****@teufel.hartford-hwp.comwrote:

I know I'm missing something obvious. I need a short horizontal rule
to preceed a line of text (in a bibliography in which the author is
repeated). I tried this:

<p>
<div class="rule"></div>, Title of book ...
</p>

style:

div.rule {
display: inline;
border-bottom: thin solid black;
height: 1pt; width: 8em;
}

Why does "display: inline" cause this div's width definition to be
ignored?

Because the CSS spec says it should: the width property doesn't apply to
inline elements.

You could try something like this:

..rule
{
border-bottom: 1px solid black;
float: left;
clear: left;
width: 8em;
height: 1em;
}
..name
{
margin-left: 8em;
}

<div class="rule"></div><div class="name">Title of book</div>

or exactly what you had but change display: inline to display:
inline-block. Won't work on FF but will in Opera, Konqueror and in this
case, since you are setting a width directly, even perhaps IE7 from what
I hear.

[Haines Brown]

Ben C <sp******@spam.eggswrites:

On 2007-04-04, Haines Brown <br****@teufel.hartford-hwp.comwrote:

Why does "display: inline" cause this div's width definition to be
ignored?

Because the CSS spec says it should: the width property doesn't apply to
inline elements.

Aha! I was thinking of the element before it was redefined. Thanks for
helping me see the light.

You could try something like this:

.rule
{
border-bottom: 1px solid black;
float: left;
clear: left;
width: 8em;
height: 1em;
}
.name
{
margin-left: 8em;
}

<div class="rule"></div><div class="name">Title of book</div>

or exactly what you had but change display: inline to display:
inline-block. Won't work on FF but will in Opera, Konqueror and in this
case, since you are setting a width directly, even perhaps IE7 from what
I hear.

The following works nicely on my FireFox 1.0.4 as well as galeon:

<p>
<div class="rule"></div>, Bibliographic title with repeated
author...
</p>

div.rule {
display: inline;
float: left;
clear: left;
position: relative; top: 1em;
margin-right: 0.2em;
border-bottom: thin solid black;
height: 1pt; width: 8em;
}

No access to IE to see if it works there. A float had occurred to me,
but not with the clear. That would seem a good solution if it stuod up
with different browsers. Thanks for helping me get this far.

--

Haines Brown, KB1GRM

[Ben C]

On 2007-04-04, Haines Brown <br****@teufel.hartford-hwp.comwrote:

Ben C <sp******@spam.eggswrites:

>On 2007-04-04, Haines Brown <br****@teufel.hartford-hwp.comwrote:

Why does "display: inline" cause this div's width definition to be
ignored?

Because the CSS spec says it should: the width property doesn't apply to
inline elements.

Aha! I was thinking of the element before it was redefined. Thanks for
helping me see the light.

>You could try something like this:

.rule
{
border-bottom: 1px solid black;
float: left;
clear: left;
width: 8em;
height: 1em;
}
.name
{
margin-left: 8em;
}

<div class="rule"></div><div class="name">Title of book</div>

or exactly what you had but change display: inline to display:
inline-block. Won't work on FF but will in Opera, Konqueror and in this
case, since you are setting a width directly, even perhaps IE7 from what
I hear.

The following works nicely on my FireFox 1.0.4 as well as galeon:

<p>
<div class="rule"></div>, Bibliographic title with repeated
author...
</p>

div.rule {
display: inline;
float: left;
clear: left;
position: relative; top: 1em;
margin-right: 0.2em;
border-bottom: thin solid black;
height: 1pt; width: 8em;
}

Yes that looks all right, but display: inline is not necessary (floats
are automatically display: block anyway).

If you have several titles in a list you will need a separate <pfor
each one. And as someone else pointed out, you aren't supposed to put a
<divinside a <pso make the outer one a <div>.

[Haines Brown]

Ben C <sp******@spam.eggswrites:

On 2007-04-04, Haines Brown <br****@teufel.hartford-hwp.comwrote:

Ben C <sp******@spam.eggswrites:

Yes that looks all right, but display: inline is not necessary (floats
are automatically display: block anyway).

Yes, that worked out nicely. Thanks. This what I now have, in case
there's any lurkers:

...
</p>
<div class="rule"></div>
<p>
, A title in a series of bibiographic references with a repeated
author...
</p>

div.rule {
float: left;
clear: left;
position: relative; top: 1em;
margin-right: 0.2em;
border-bottom: thin solid black;
height: 1pt; width: 8em;
}

I'm not clear just why a <divcan't be in a <p>, but I'll take your
word for it. I do it quite a bit. For example, in a block quote, I
want to place the author's name on next line, right justified and in a
little bit smaller type. I won't bother you with the style, but the page
markup goes like this:

<blockquote>
<p>
Text...<div class="author">Author's name</div>
</p>
</blockquote>

If I understood why it's wrong to put a <divin a <p>, I would be
motivated to redefine my style for blockquotes.

--

Haines Brown, KB1GRM
Dialectical Materialist

[Bergamot]

Haines Brown wrote:

>
<p>
Text...<div class="author">Author's name</div>
</p>

If I understood why it's wrong to put a <divin a <p>

Read the specs
http://www.w3.org/TR/html401/struct/text.html#edef-P

<!ELEMENT P - O (%inline;)*

It means <pcan only contain inline elements, which excludes <div>.
Use <spaninstead. Give it display:block if you want it to behave like
a div.

--
Berg

[dorayme]

In article <87************@teufel.hartford-hwp.com>,
Haines Brown <br****@teufel.hartford-hwp.comwrote:

If I understood why it's wrong to put a <divin a <p>, I would be
motivated to redefine my style for blockquotes.

--

Haines Brown, KB1GRM
Dialectical Materialist

How will you understand anything like this? If you are a
dialectical materialist, you will be unable to comprehend
anything, for each raw candidate chunk that goes into such an
intellectual sausage machine must, if the machine works well and
dialectrically, come out just about the same as anything else
that goes in and out, namely a hodge podge of chaotic glug.

A paragraph basically is a series of sentences, you can see them
in all the books of the world. It is highly convenient to have an
element in html to mean this. If you stretch the meaning to
include everything under the sun, you lose the simplicity and
power of it. There are various things you can put inside the
paragraph element but a div block element is not one of them, as
this would rather open the floodgates to sausage babble.

--
dorayme

[Dick Gaughan]

In <87************@teufel.hartford-hwp.comon Thu, 05 Apr 2007
01:50:18 GMT, Haines Brown <br****@teufel.hartford-hwp.comwrote:

>If I understood why it's wrong to put a <divin a <p>, I would be
motivated to redefine my style for blockquotes.

--

Haines Brown, KB1GRM
Dialectical Materialist

Good.

Thesis: <divinside <p>

Antithesis: increasing internal struggle by <divagainst
contradictory relationship between container and descendent

Synthesis: resolution of contradiction via reading of standards,
allowing liberation of <divleading to the establishment of the
dictatorship of the proletariat, the Peoples' Republic of Usenet
and world peace.

HTH

--
DG

mail to us****@gaelweb.co.uk goes to a black hole
news@ is valid for the time being but may not remain so

[Ben C]

On 2007-04-05, Haines Brown <br****@teufel.hartford-hwp.comwrote:
[...]

If I understood why it's wrong to put a <divin a <p>, I would be
motivated to redefine my style for blockquotes.

The rules for HTML just say you can't, meaning that if you do there's a
risk some browsers will detect it as an error and "correct" it
unpredictably.

When it comes to CSS, a <pis just a block box with a couple of styles
(usually a top margin or something), and blocks can go inside blocks
just fine. So it shouldn't be a problem to replace <pwith <div>.

Or as someone else suggested make the contents of the <p"inline" from
an HTML point of view (i.e. <spanetc.) but turn them into CSS blocks
with display: block. Whatever seems to make more sense in a particular
case. You can map your CSS onto just about any HTML structure, so you
might as well choose a valid one.

[Jukka K. Korpela]

Scripsit Haines Brown:

The following works nicely on my FireFox 1.0.4 as well as galeon:

<p>
<div class="rule"></div>, Bibliographic title with repeated
author...
</p>

It "works" only in the sense of performing (mostly by random) error
correction that happens to coincide with what you want. A <divelement
inside <pis prohibited by HTML syntax, and changing the display property
value does not affect this at all.

No access to IE to see if it works there.

It "works" in the same sense. This might be related to the beautiful weather
around here and the favorable position of Jupiter as well as the phase of
the moon.

A float had occurred to me,
but not with the clear. That would seem a good solution if it stuod up
with different browsers.

Well, yes, making the element floated lets you set its width effectively
(even on standards-conforming browsers).

But I think what you primarily need here is not CSS at all but some special
characters. Admittedly, the notations you want are comparable to list
bullets and might be logically handled using CSS, and could be handled using
generated content, but IE hasn't started supporting that yet. So in any
case, the practical solution is to insert some characters. This ensures that
the content is rendered OK even when CSS is off, though with the mild
reservation that the browser needs to support the characters you use.

It's not really rocket science characters. According to the Chicago Manual
of Style, for successive entries by the same authors, a 3-em dash followed
by a period or comma is used. Since 3-em dash does not exist as a separate
character, the practical choice is to use three em dashes:
&mdash;&mdash;&mdash;
(Support to &mdash; is almost universal in web browsers; people still using
older browsers can probably tolerate the problem caused, since they'll meet
it often anyway.)

This also gives a better rendering, since the typographic convention is to
use dashes, and they are in a considerably higher vertical position than a
bottom border is.

Now comes the CSS part. Consecutive em dashes should be joining, to give the
desired rendering. In some fonts they aren't. This is not catastrophic, but
you can check what happens with the fonts that you suggest in your CSS code,
and perhaps even use a different font for the dashes (even though this gets
clumsy, since you would need to wrap them inside some <span
class="em3">...</spanfor this). For example, in Times New Roman, Garamond,
and Arial em dashes are joining.

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

[Haines Brown]

Ben,

Ben C <sp******@spam.eggswrites:

The rules for HTML just say you can't, meaning that if you do
there's a risk some browsers will detect it as an error and
"correct" it unpredictably.

Thanks. That's just the explanation I needed (along with Berg's W3C
citation). I'll follow your suggestion concerning the revision of my
blockquote style.

I inadvertantly appended my full signature to a message, and that
elicited an interesting (and sad) couple of comments. In this world we
are all in trouble. I am deeply concerned about that and do what
little I can to try to change things for the better, where taking a
conventional approach obviously won't do. However, I politely truncate
my usual signature in those milieu where people are intimidated by
world views other than their own. This time I overlooked doing that,
and I apologize for stepping on people's sensitivities.

--

Haines Brown, KB1GRM

[Haines Brown]

"Jukka K. Korpela" <jk******@cs.tut.fiwrites:

According to the Chicago
Manual of Style, for successive entries by the same authors, a 3-em
dash followed by a period or comma is used. Since 3-em dash does not
exist as a separate character, the practical choice is to use three em
dashes:

This also gives a better rendering, since the typographic convention
is to use dashes, and they are in a considerably higher vertical
position than a bottom border is.

Now comes the CSS part. Consecutive em dashes should be joining, to
give the desired rendering. In some fonts they aren't.

... you would need to wrap
them inside some <span class="em3">...</spanfor this). For example,
in Times New Roman, Garamond, and Arial em dashes are joining.

Thanks, Jukka. The gaps between em-dashes is what started me along the
path in the first place. I didn't realize that this gap was a function
of font. So my the whole exercise could have been avoided by doing the
simple thing of using m-dashes in combination with a font
specification.

--

Haines Brown, KB1GRM

[Bergamot]

Haines Brown wrote:

>
the whole exercise could have been avoided by doing the
simple thing of using m-dashes in combination with a font
specification.

That's what happens when you decide on a solution without really
identifying what you want to achieve. You end up fixing the wrong problem.

That's a lesson a lot of people have yet to learn. But you know better
now, eh? :)

--
Berg