View Full Version : Image margins


marcelo2605
05-17-2011, 01:54 PM
I put the following code to my image:

img.image_left{
float:left;
text-align: left;
margin: 1em;
}

Works fine in ADE but in iBooks, the margin doesn't appear.

DaleDe
05-17-2011, 08:47 PM
iBooks is broken. For a workaround place a border on the image. That is about all you can do.

marcelo2605
05-18-2011, 10:10 AM
DaleDe, you mean leave a blank space in image file?

JSWolf
05-18-2011, 10:19 AM
iBooks breaks even more rules then ADE.

DaleDe
05-18-2011, 10:44 AM
DaleDe, you mean leave a blank space in image file?

Yes, at the edge of the image, just like photographs used to do. It will guarantee a margin. IrfanView can add this.

Dale

marcelo2605
05-19-2011, 09:33 AM
Thanks guy, I'm used to programming css for websites and am frustrated with the lack of standardization in the archives epubs

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:

<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


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.

Adjust
05-19-2011, 10:57 PM
Have you tried

<div class="image">
<img src="images/Title.png" alt="Title.png" height="95%" />
</div>



.image {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1.2em;
text-align: center;
}

Toxaris
05-20-2011, 02:58 AM
It is like Adjust said. Definition in the CSS is not enough, you have to use it. Try the following:

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

or


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

NASCARaddicted
05-20-2011, 08:33 PM
thanks you two, you really helped me.

JSWolf
05-21-2011, 01:16 PM
Thanks guy, I'm used to programming css for websites and am frustrated with the lack of standardization in the archives epubs

iBooks is the issue, ADE has it's quirks, but it works a lot more like you'd expect. iBooks sometimes just decides to do something totally different.