ibooks - cover image bleeds over to page 2

Larionov · 04-21-2013, 07:41 PM

Hello!

I have a problem with an epub file i'm currently working on. I've seen other threads on this forum where people with problems similar to mine have asked for help, but eventhough I've tried as best I can I still can't seem to get this issue fixed. Hopefully posting here will help.

All right, my problem is this: I have created this epub file in Sigil, and everytime i open it i ibooks the lower part cover image seems to "bleed" over on page 2 - showing the lower most part of the cover image sort of like a bar or a thin banner at the top of page 2. The rest of page 2 is always blank. I've tried adding a height=99% line to the code, without success. This is what the xhtml page says in code view:

Quote:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>

<body>
<h3 style="text-align: center;" title="Omslag"><img alt="omslag7f" src="../Images/omslag7f.jpg" /><br /></h3>
</body>
</html>

(As a side note, the word "omslag" means "cover" in swedish, my native language, if anybody is curious.)

Does anybody know how to fix this? The rest of the epub reads absolutely fine, it's just this annoying thing. I should perhaps also mention that when it comes to html and codes n' stuff, I'm a total n00b.

I should also mention that i'm reading the epub on an iPhone, but the problem is the same on the iPad (iBook). Also, it doesn't really seem to matter wheter i open the file in iBook, Kobo or NeoSoarBook.

I would be exeremly grateful if anyone could help!

theducks · 04-21-2013, 08:10 PM

Why is there a <br />

Why no class= xxx (use a stylesheet) with margins as well as your 'center'
You are accepting the readers defaults when not explicit

exaltedwombat · 04-22-2013, 06:39 AM

You should lose the <br />

Also lose the <h3>. Readers tend to add padding under a header.

<body style="margin:0;padding:0"> might be a good idea.

Link to a stylesheet if you want, but as a book is likely to have only one cover it's no great sin to leave this one page unlinked and use inline code.

Larionov · 04-22-2013, 11:20 AM

Thank you for your advice!

After removing the "<br />" and "<h3>" and adding the "<body style="margin:0;padding:0">" the cover no longer bled over on to page 2. Instead the epub now has a blank page before the cover image, and a blank page after it.

Any ideas?

exaltedwombat · 04-22-2013, 11:23 AM

<body style="margin:0;padding:0"> should REPLACE the existing <body> tag. Sorry if that wasn't clear. Did you add it as an extra?

Larionov · 04-22-2013, 11:33 AM

Quote:

Originally Posted by exaltedwombat

<body style="margin:0;padding:0"> should REPLACE the existing <body> tag. Sorry if that wasn't clear. Did you add it as an extra?

no, i replaced the existing <body> tag with the suggested one

exaltedwombat · 04-22-2013, 11:43 AM

OK. Show us the revised page of code, then.

Larionov · 04-22-2013, 11:50 AM

The code for the cover page as of present:

Quote:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Omslag</title>
</head>

<body style="margin: 0px; padding: 0px;">
<p style="text-align: center;"><img alt="omslag7f" src="../Images/omslag7f.jpg"/></p>
</body>
</html>

theducks · 04-22-2013, 11:57 AM

Doesn't P have its own default margins?
Those may need to be set also

exaltedwombat · 04-22-2013, 12:31 PM

<div> instead of <p> will get rid of any built-in paragraph styling. The height setting may not agree with Sigil Preview, but I think a reader will cope.
Have you set the semantics for both cover page and cover image?

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Omslag</title>
</head>

<body style="margin: 0px; padding: 0px;">
<div style="text-align: center;"><img alt="omslag7f" src="../Images/omslag7f.jpg" height="100%" /></div>
</body>
</html>

Turtle91 · 04-22-2013, 12:40 PM

That's certainly better, although I would put all styling (body, img, and div) in a CSS. I would also add a style definition for img to make sure it stays with the correct aspect ratio no matter the dimensions of the display:

Code:

body {margin:0; padding:0}
img {max-height:100%; max-width:100%}
div.cover{text-align:center; text-indent:0; margin:0 auto}

<body>
<div class="cover"><img alt="Omslag" src="../Images/omslag7f.jpg" /></div>
</body>

This will fill the display and keep proper aspect ratio as long as the image is larger than the display size to begin with. if you are trying to stretch an image to fill the screen then you either need to add a width/height:100%, or use an SVG wrapper, or even what I use:

Code:

h1[title=Cover] {display:none}

<body style="background:url(&quote;../Images/omslag7f.jpg&quote;)
 no-repeat fixed center center; 
background-size:contain">
<h1 title="Cover"></h1>
</body>

That works great but older/non-compliant readers might not display it properly...then again, older/non-compliant readers might not display SVG properly either! Also, to make matters worse, the new standard doesn't allow a % in the height/width setting of an image, only px. Gotta love it!

Cheers!

Larionov · 04-22-2013, 12:52 PM

The problem seems to be solved now. I changed the <p> tag to a <div> (basically I copied a non strange-looking epub book and basically did what they did), and replaced the cover jpg with a one sized 600 x 800 px. The cover is on page 1 of the epub document i ibooks and looks good on the ipad.

I would like to thank everybody for assisting yours truly!

04-22-2013, 11:23 AM	#5
exaltedwombat Guru Posts: 878 Karma: 2457540 Join Date: Nov 2011 Device: none	<body style="margin:0;padding:0"> should REPLACE the existing <body> tag. Sorry if that wasn't clear. Did you add it as an extra? Last edited by exaltedwombat; 04-22-2013 at 11:26 AM.

04-22-2013, 12:40 PM	#11
Turtle91 A Hairy Wizard Posts: 3,295 Karma: 20171067 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	That's certainly better, although I would put all styling (body, img, and div) in a CSS. I would also add a style definition for img to make sure it stays with the correct aspect ratio no matter the dimensions of the display: Code: body {margin:0; padding:0} img {max-height:100%; max-width:100%} div.cover{text-align:center; text-indent:0; margin:0 auto} <body> <div class="cover"><img alt="Omslag" src="../Images/omslag7f.jpg" /></div> </body> This will fill the display and keep proper aspect ratio as long as the image is larger than the display size to begin with. if you are trying to stretch an image to fill the screen then you either need to add a width/height:100%, or use an SVG wrapper, or even what I use: Code: h1[title=Cover] {display:none} <body style="background:url(&quote;../Images/omslag7f.jpg&quote;) no-repeat fixed center center; background-size:contain"> <h1 title="Cover"></h1> </body> That works great but older/non-compliant readers might not display it properly...then again, older/non-compliant readers might not display SVG properly either! Also, to make matters worse, the new standard doesn't allow a % in the height/width setting of an image, only px. Gotta love it! Cheers! Last edited by Turtle91; 04-22-2013 at 12:46 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Sigil adding blank page after cover image	ebookn00b	Sigil	32	06-20-2013 01:44 PM
How to preview first EPUB embedded image (not cover page!)	Mdemaillard	Library Management	7	01-14-2013 04:06 AM
Script to scrape page for a cover image for recipe?	adoucette	Recipes	12	02-29-2012 06:24 PM
g cover image without losing first page of text	fictionaddiction	Conversion	1	07-22-2011 02:27 PM
iBooks, Table of Contents, Missing Cover image.	Daddy Warpig	Apple Devices	2	04-15-2010 10:09 AM

04-21-2013, 08:10 PM	#2
theducks Well trained by Cats Posts: 30,886 Karma: 59840450 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Why is there a <br /> Why no class= xxx (use a stylesheet) with margins as well as your 'center' You are accepting the readers defaults when not explicit

04-22-2013, 06:39 AM	#3
exaltedwombat Guru Posts: 878 Karma: 2457540 Join Date: Nov 2011 Device: none	You should lose the <br /> Also lose the <h3>. Readers tend to add padding under a header. <body style="margin:0;padding:0"> might be a good idea. Link to a stylesheet if you want, but as a book is likely to have only one cover it's no great sin to leave this one page unlinked and use inline code.

04-22-2013, 11:20 AM	#4
Larionov Junior Member Posts: 5 Karma: 10 Join Date: Apr 2013 Device: iPhone	Thank you for your advice! After removing the "<br />" and "<h3>" and adding the "<body style="margin:0;padding:0">" the cover no longer bled over on to page 2. Instead the epub now has a blank page before the cover image, and a blank page after it. Any ideas?

04-22-2013, 11:43 AM	#7
exaltedwombat Guru Posts: 878 Karma: 2457540 Join Date: Nov 2011 Device: none	OK. Show us the revised page of code, then.

04-22-2013, 11:57 AM	#9
theducks Well trained by Cats Posts: 30,886 Karma: 59840450 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Doesn't P have its own default margins? Those may need to be set also

04-22-2013, 12:31 PM	#10
exaltedwombat Guru Posts: 878 Karma: 2457540 Join Date: Nov 2011 Device: none	<div> instead of <p> will get rid of any built-in paragraph styling. The height setting may not agree with Sigil Preview, but I think a reader will cope. Have you set the semantics for both cover page and cover image? <?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Omslag</title> </head> <body style="margin: 0px; padding: 0px;"> <div style="text-align: center;"><img alt="omslag7f" src="../Images/omslag7f.jpg" height="100%" /></div> </body> </html>

04-22-2013, 12:52 PM	#12
Larionov Junior Member Posts: 5 Karma: 10 Join Date: Apr 2013 Device: iPhone	The problem seems to be solved now. I changed the <p> tag to a <div> (basically I copied a non strange-looking epub book and basically did what they did), and replaced the cover jpg with a one sized 600 x 800 px. The cover is on page 1 of the epub document i ibooks and looks good on the ipad. I would like to thank everybody for assisting yours truly!

Advert

Advert