Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 04-21-2013, 07:41 PM   #1
Larionov
Junior Member
Larionov began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Apr 2013
Device: iPhone
ibooks - cover image bleeds over to page 2

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!
Larionov is offline   Reply With Quote
Old 04-21-2013, 08:10 PM   #2
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 14,863
Karma: 5654321
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
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
theducks is offline   Reply With Quote
Old 04-22-2013, 06:39 AM   #3
exaltedwombat
Evangelist
exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.
 
Posts: 445
Karma: 1703930
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.
exaltedwombat is offline   Reply With Quote
Old 04-22-2013, 11:20 AM   #4
Larionov
Junior Member
Larionov began at the beginning.
 
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?
Larionov is offline   Reply With Quote
Old 04-22-2013, 11:23 AM   #5
exaltedwombat
Evangelist
exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.
 
Posts: 445
Karma: 1703930
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.
exaltedwombat is offline   Reply With Quote
Old 04-22-2013, 11:33 AM   #6
Larionov
Junior Member
Larionov began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Apr 2013
Device: iPhone
Quote:
Originally Posted by exaltedwombat View Post
<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
Larionov is offline   Reply With Quote
Old 04-22-2013, 11:43 AM   #7
exaltedwombat
Evangelist
exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.
 
Posts: 445
Karma: 1703930
Join Date: Nov 2011
Device: none
OK. Show us the revised page of code, then.
exaltedwombat is offline   Reply With Quote
Old 04-22-2013, 11:50 AM   #8
Larionov
Junior Member
Larionov began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Apr 2013
Device: iPhone
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>
Larionov is offline   Reply With Quote
Old 04-22-2013, 11:57 AM   #9
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 14,863
Karma: 5654321
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Doesn't P have its own default margins?
Those may need to be set also
theducks is offline   Reply With Quote
Old 04-22-2013, 12:31 PM   #10
exaltedwombat
Evangelist
exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.
 
Posts: 445
Karma: 1703930
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>
exaltedwombat is offline   Reply With Quote
Old 04-22-2013, 12:40 PM   #11
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
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.
Turtle91 is offline   Reply With Quote
Old 04-22-2013, 12:52 PM   #12
Larionov
Junior Member
Larionov began at the beginning.
 
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!
Larionov is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 04:06 AM.


MobileRead.com is a privately owned, operated and funded community.