[RbnJrg]

Originally Posted by AlexBell

Thanks for your suggestion. I have now read the material, but am not at all sure what it means, nor what each part of it does. I do my ebooks in XHTML 1.1 and CSS2, which probably explains why I don't understand your material.

You have to solve two problems and not one For that reason you wrote:

...and don't understand why the red extends two lines or so _below_ the drop cap - nor what is probably more important, how to stop the background colour of the dropcap from extending below the dropcap.

The first problem is to position (properly) a grey (red) square; the second problem is to position the drop cap inside that square (of that way you won't have the issue of the color extended for two lines). You can do that (only with css2) of the following way:

p {
    text-indent: 0;
    text-align: justify;
}

/* Style to set the grey square */
.DropSpace {
    float: left;
    font-size: 3em;
    width: 1em;
    height: 1em;
    background: grey;
    padding: 5px;
    margin: -0.0em 5px -0.2em 0;
}

/* Style to fit the DropCap inside the grey square */
.DropCap {
    display: block;
    position: relative;
    top: -0.15em;
    left: -0.06em;
    font-size: 1.4em;
    font-weight: bold;
    font-family: sans-serif;
    width: 0.8em;
    height: 0.8em;
    text-align: center;
}

And in the .xhtml file:

<p><span class="DropSpace"><span class="DropCap">B</span></span>ehind the walls of Augustine,<br />
  he notes the seven traits of plants<br />
  and how their combinations<br />
  tell us that what was shall surely be<br />
  again. He writes of <i>dominance</i><br />
  and <i>recession</i>, of the patterns</p>

This is how it looks in ADE (with different font sizes):



Below I attach the respective epub.

Regards
Rubén