Image margins

marcelo2605 · 05-17-2011, 01:54 PM

I put the following code to my image:

Code:

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

Quote:

Originally Posted by marcelo2605

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:

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.

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:

Code:

<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

Code:

<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

Quote:

Originally Posted by marcelo2605

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.

05-17-2011, 01:54 PM	#1
marcelo2605 Member Posts: 19 Karma: 10 Join Date: Apr 2011 Device: iPad	Image margins I put the following code to my image: Code: img.image_left{ float:left; text-align: left; margin: 1em; } Works fine in ADE but in iBooks, the margin doesn't appear.

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.

05-20-2011, 02:58 AM	#9
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	It is like Adjust said. Definition in the CSS is not enough, you have to use it. Try the following: Code: <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 Code: <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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
image and white margins	Copycat	Sigil	5	04-15-2011 05:10 AM
"Insert Image" renames .jpg's incorrectly... but shows the correct image!	megacoupe	Sigil	4	03-06-2011 08:13 PM
Margins in 6.3	Amalthia	Calibre	19	07-10-2010 08:40 AM
Help with margins	Switch	Calibre	3	04-30-2010 02:53 AM
Margins	cklammer	EPUBReader	0	12-07-2009 02:55 AM

05-17-2011, 08:47 PM	#2
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	iBooks is broken. For a workaround place a border on the image. That is about all you can do.

05-18-2011, 10:10 AM	#3
marcelo2605 Member Posts: 19 Karma: 10 Join Date: Apr 2011 Device: iPad	DaleDe, you mean leave a blank space in image file?

05-18-2011, 10:19 AM	#4
JSWolf Resident Curmudgeon Posts: 73,957 Karma: 128903250 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	iBooks breaks even more rules then ADE.

05-19-2011, 09:33 AM	#6
marcelo2605 Member Posts: 19 Karma: 10 Join Date: Apr 2011 Device: iPad	Thanks guy, I'm used to programming css for websites and am frustrated with the lack of standardization in the archives epubs

05-19-2011, 10:57 PM	#8
Adjust Addict Posts: 351 Karma: 70000 Join Date: Jul 2010 Location: Australia Device: ADE, iPad	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; }

05-20-2011, 08:33 PM	#10
NASCARaddicted Addict Posts: 340 Karma: 43106 Join Date: Apr 2009 Location: Germany Device: BeBook One, Pocketbook Touch, Pocketbook Touch HD	thanks you two, you really helped me.

Advert

Advert