Stylesheets - making block inline collapses its width

Author

making block inline collapses its width

Haines Brown

2007-04-04, 6:22 pm

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

2007-04-04, 6:22 pm

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

2007-04-04, 6:22 pm

On 4 Apr, 13:56, Haines Brown <bro...@teufel.hartford-hwp.com> wrote:
> I need a short horizontal rule

Then use <hr> and tweak it with CSS

Don't put <div> inside <p> either.

Ben C

2007-04-04, 6:22 pm

On 2007-04-04, Haines Brown <brownh@teufel.hartford-hwp.com> 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;
> }
>
> 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

2007-04-04, 6:22 pm

Ben C <spamspam@spam.eggs> writes:

> On 2007-04-04, Haines Brown <brownh@teufel.hartford-hwp.com> wrote:

>
> 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

2007-04-04, 6:22 pm

On 2007-04-04, Haines Brown <brownh@teufel.hartford-hwp.com> wrote:
> Ben C <spamspam@spam.eggs> writes:
>
>
>
> Aha! I was thinking of the element before it was redefined. Thanks for
> helping me see the light.
>
>
> 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 <p> for
each one. And as someone else pointed out, you aren't supposed to put a
<div> inside a <p> so make the outer one a <div>.

Haines Brown

2007-04-04, 10:16 pm

Ben C <spamspam@spam.eggs> writes:

> On 2007-04-04, Haines Brown <brownh@teufel.hartford-hwp.com> wrote:
> 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 <div> can'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 <div> in a <p>, I would be
motivated to redefine my style for blockquotes.

--

Haines Brown, KB1GRM
Dialectical Materialist

Bergamot

2007-04-05, 3:19 am

Haines Brown wrote:
>
> <p>
> Text...<div class="author">Author's name</div>
> </p>
>
> If I understood why it's wrong to put a <div> in a <p>

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

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

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

--
Berg

dorayme

2007-04-05, 3:19 am

In article <87fy7f6145.fsf@teufel.hartford-hwp.com>,
Haines Brown <brownh@teufel.hartford-hwp.com> wrote:

> If I understood why it's wrong to put a <div> in 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

2007-04-05, 3:19 am

In <87fy7f6145.fsf@teufel.hartford-hwp.com> on Thu, 05 Apr 2007
01:50:18 GMT, Haines Brown <brownh@teufel.hartford-hwp.com> wrote:

>If I understood why it's wrong to put a <div> in a <p>, I would be
>motivated to redefine my style for blockquotes.
>
>--
>
> Haines Brown, KB1GRM
> Dialectical Materialist

Good.

Thesis: <div> inside <p>

Antithesis: increasing internal struggle by <div> against
contradictory relationship between container and descendent

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

HTH

--
DG

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

Ben C

2007-04-05, 3:19 am

On 2007-04-05, Haines Brown <brownh@teufel.hartford-hwp.com> wrote:
[...]
> If I understood why it's wrong to put a <div> in 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 <p> is 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 <p> with <div>.

Or as someone else suggested make the contents of the <p> "inline" from
an HTML point of view (i.e. <span> etc.) 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

2007-04-05, 3:19 am

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 <div> element
inside <p> is 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:
———
(Support to — 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">...</span> for 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

2007-04-05, 6:18 pm

Ben,

Ben C <spamspam@spam.eggs> writes:

> 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

2007-04-05, 6:18 pm

"Jukka K. Korpela" <jkorpela@cs.tut.fi> writes:

> 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">...</span> for 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

2007-04-05, 6:18 pm

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