[dasboeh]

I'm currently working on a publishers project, who wishes to add special "stick-out" sites to the E-Book. Which means a grey background with round borders at the start and the ending.

I accomplished this with DIVs and a starting and ending image.

Here's the XHTML-Code:

<div class="REDbgUpper"><img alt="" src="../Images/UpperGrey.png" width="100%" /></div>

      <div class="REDbgText">
        <p class="REDheading">Er prägte diesen Satz</p>

        <p class="REDbodyfirst">Vielleicht kennen Sie ihn als einen der erfolgreichsten Politiker, der jemals auf der Weltbühne stand oder als einen der angesehensten Staatsmänner aller Zeiten, doch wissen Sie auch, was der ehemalige britische Premierminister Winston Churchill durchgemacht hat, bevor er zu einer derartigen Größe wurde?</p>
.
.
.
<p class="REDbodytextENDE">Ich ermutige Sie heute genau so, wie Churchill 1941 die Schüler ermahnte: »Was Sie auch tun, geben Sie nicht nach und geben Sie niemals, niemals, niemals auf.«</p>
      </div>

      <div class="REDbgLower"><img alt="" src="../Images/LowerGrey.png" width="100%" /></div>

And here's the according CSS:

p.REDheading {
	font-size : 1.4em;
	font-weight : bold;
	text-align : center;
	margin : -1px 2em 0.8em 2em;
	page-break-after:avoid;
	background: #e6e6e6;
}

p.REDbodyfirst {
	text-indent : 0px;
	margin: 0 2em 0 2em;
	background: #e6e6e6;
}

p.REDbodytext {
	text-indent : 1.5em;
	margin: 0 2em 0 2em;
	background: #e6e6e6;
}

p.REDbodytextENDE {
	text-indent : 1.5em;
	margin: 0 2em -1px 2em;
	background: #e6e6e6;
}
div.REDbgText {
	width: 100%;
	background: #e6e6e6;
	margin: 0;
}

div.REDbgUpper {
	margin: 0 0 -1px 0;
	padding-bottom: 0;
}

div.REDbgLower {
	margin: 0 0 0 0;
}

With ADE and iBooks, everything looks just fine as I wanted it to be. :-)





But Calibre shows an awkward white spacing at the bottom of the upper image (I colored the borders of the DIVs for better hilighting the mess):





Has anybody any suggestions, how to fix this?

Thanks a lot in advance!

Stefan