MobileRead Forums - View Single Post

NASCARaddicted · 05-19-2011, 08:12 PM

I don't want to hijack your thread, but I have a similar problem, so instead of staring a new thread, I write it in here. If you have a problem with that, let me know it, please.

Here is my problem: I have an ebook with images. I want to have a margin of 2 em below and above the image.

Here is my code:

Code:

<p>bla bla bla</p>
<div class="Center"><img src="pic1.png" style="width:339px;height:288px;"  class="topbottom" alt="Pic 1" /></div>
<p>bla bla bla</p>

and here is my css

Code:

p { margin: 0; border: 0pt; text-indent: 1.5em; text-align:justify; }
.Center { text-align:center; }
.topbottom {margin-top:2em;  margin-bottom:2em;}

I think the p and Center is self explaining. I added the topbottom class to add a margin of 2 above and below the image. Now, in Firefox 4, it looks perfect. But when I put it on my reader (Bebook One, with ADE), there is a margin below the image, but not above. There is no margin between the paragraph and the following image.

Am I doing something wrong? Is that a problem with ADE? Or could this be caused by Calibre? I unzipped the finished epub, and looked at the css created by Calibre, but I saw nothing wrong there, too. Or is because I use p and div?

I hope someone out there can help me.

05-19-2011, 08:12 PM	#7
NASCARaddicted Addict Posts: 340 Karma: 43106 Join Date: Apr 2009 Location: Germany Device: BeBook One, Pocketbook Touch, Pocketbook Touch HD	I don't want to hijack your thread, but I have a similar problem, so instead of staring a new thread, I write it in here. If you have a problem with that, let me know it, please. Here is my problem: I have an ebook with images. I want to have a margin of 2 em below and above the image. Here is my code: Code: <p>bla bla bla</p> <div class="Center"><img src="pic1.png" style="width:339px;height:288px;" class="topbottom" alt="Pic 1" /></div> <p>bla bla bla</p> and here is my css Code: p { margin: 0; border: 0pt; text-indent: 1.5em; text-align:justify; } .Center { text-align:center; } .topbottom {margin-top:2em; margin-bottom:2em;} I think the p and Center is self explaining. I added the topbottom class to add a margin of 2 above and below the image. Now, in Firefox 4, it looks perfect. But when I put it on my reader (Bebook One, with ADE), there is a margin below the image, but not above. There is no margin between the paragraph and the following image. Am I doing something wrong? Is that a problem with ADE? Or could this be caused by Calibre? I unzipped the finished epub, and looked at the css created by Calibre, but I saw nothing wrong there, too. Or is because I use p and div? I hope someone out there can help me. Last edited by NASCARaddicted; 05-19-2011 at 08:21 PM.