h1 vs p leaves blank page

rosshalde · 11-19-2014, 08:57 PM

Here is the set-up
File 1 - cover
File 2 - Title Page picture and copyright page picture
File 3 - Forward of Book

When I have the Title word "Forward" labeled h1 in File 3 the epub has a blank page between the copyright page and the "Forward"

When I have the Title word "Forward labeled as a plain old "p" the epub gets rid of the blank page.

That is the one and only difference that I made. Any idea why?

I would like to label it h1 so I can easily put it in the TOC

PeterT · 11-19-2014, 09:24 PM

At some point it would make a lot easier if you would post samples of what is causing problems.

theducks · 11-19-2014, 09:43 PM

We need to see the CODE
Believe me, h# followed by a p does not create a blank page, even when using DEFAULTS (no style or CSS settings defined)

Code:

<h1>Chapter 1</h1>
<p>Words</p>

<h1>Chapter 2</h1>
<p>More Words</p>

Will all be on the same Screen (unless you are running at a very high Zoom value)

rosshalde · 11-19-2014, 10:17 PM

ok, here is some code. If you are wondering about the <p9>. I inserted all the pics in code view, but wanted them all centered. When inserting the all were left aligned. I added the <p9> tag to the pics because the css has <p9> as centered. The space is between the two pics. KOBO has no space. ibook has the space

<?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>1 Section 1 | Misericordia Fourth Reader</title>
<meta content="D0F15332-8BE5-4500-848C-D1A65E029346" name="EPB-UUID" />
<link href="../Styles/book.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="body" style="white-space:normal">
HERE IS THE PROBLEM...If I change this h1 tag to <p> there is no blank page, but if I use the <h1> tag, there is a blank page between the pics
<h1 style="text-align: center;" title="Title Page"><img alt="Misericordia Fourth Reader_Page_002" src="../Images/Misericordia%20Fourth%20Reader_Page_002.jpeg" /></h1>

<p class="s9"><img alt="Misericordia Fourth Reader_Page_003" src="../Images/Misericordia%20Fourth%20Reader_Page_003.jpeg" /></p>
</div>
</body>
</html>

here is the css for h1 and p9
.h1{
font-align; center
}
body, div, p, h1, h2, h3, h4 { margin: 0; padding: 0; }
.s9{
font-size: 87.5000%;
text-align: center;
}

Toxaris · 11-20-2014, 03:05 AM

Ah, the blank space after image bug from iBooks. Try making the image smaller.

rosshalde · 11-20-2014, 07:39 AM

i also thought about it being image size, but I am not altering the image size at all, just changing the label from <h1> to <p> and it fixes the problem. The only reason I don't want to do that is because I want TOC

theducks · 11-20-2014, 09:28 AM

Quote:

Originally Posted by rosshalde

i also thought about it being image size, but I am not altering the image size at all, just changing the label from <h1> to <p> and it fixes the problem. The only reason I don't want to do that is because I want TOC

You have not yet gleaned that Size is the only default property of a tag.
font-size, font-weight, margin, line-height all apply

Appendix D of the CSS2.1 document lists some of the common Browser defaults. READERS are not browsers, they may have different ones.

Bottom line:
If it is CRITICAL to you, then Control it in the CSS, otherwise you will get the whim of the device designer

Hitch · 11-20-2014, 03:34 PM

Quote:

Originally Posted by rosshalde

i also thought about it being image size, but I am not altering the image size at all, just changing the label from <h1> to <p> and it fixes the problem. The only reason I don't want to do that is because I want TOC

You need to style the IMAGE class, not the p or h class. That's kluging, and it will come back to bite you. if you want a heading, because you need to use an automatic HTML TOC builder, then use a blank heading class with the heading you want in the alt tag.

For the FOREWORD.

Hitch

rosshalde · 11-21-2014, 10:11 AM

Hitch,
Thanks for the advice. I have only been using <p> around pics because it worked.
What sort of problems might I encounter by cheating like this?
Also, I have been tinkering all morning trying to style all the images for the entire book to be center. What do I need to put in the CSS?
I haven't gotten this quite right yet.

11-19-2014, 08:57 PM	#1
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	h1 vs p leaves blank page Here is the set-up File 1 - cover File 2 - Title Page picture and copyright page picture File 3 - Forward of Book When I have the Title word "Forward" labeled h1 in File 3 the epub has a blank page between the copyright page and the "Forward" When I have the Title word "Forward labeled as a plain old "p" the epub gets rid of the blank page. That is the one and only difference that I made. Any idea why? I would like to label it h1 so I can easily put it in the TOC

11-19-2014, 09:43 PM	#3
theducks Well trained by Cats Posts: 30,912 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	We need to see the CODE Believe me, h# followed by a p does not create a blank page, even when using DEFAULTS (no style or CSS settings defined) Code: <h1>Chapter 1</h1> <p>Words</p> <h1>Chapter 2</h1> <p>More Words</p> Will all be on the same Screen (unless you are running at a very high Zoom value)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Page blank before and after book image page	osiris12	Sigil	12	05-28-2015 04:27 PM
1st page replaced by blank "Chapter 1" page	tone-alone	Calibre	1	07-12-2014 02:58 PM
Blank page before chapter	Gerlyn	Sigil	5	02-13-2012 09:46 AM
Blank first page	spaze	Writer2ePub	3	05-15-2011 11:41 AM
Add a blank page	rodrigo2008	iRex	1	04-22-2008 01:46 AM

11-19-2014, 09:24 PM	#2
PeterT Grand Sorcerer Posts: 13,309 Karma: 78876004 Join Date: Nov 2007 Location: Toronto Device: Libra H2O, Libra Colour	At some point it would make a lot easier if you would post samples of what is causing problems.

11-19-2014, 10:17 PM	#4
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	ok, here is some code. If you are wondering about the <p9>. I inserted all the pics in code view, but wanted them all centered. When inserting the all were left aligned. I added the <p9> tag to the pics because the css has <p9> as centered. The space is between the two pics. KOBO has no space. ibook has the space <?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>1 Section 1 \| Misericordia Fourth Reader</title> <meta content="D0F15332-8BE5-4500-848C-D1A65E029346" name="EPB-UUID" /> <link href="../Styles/book.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="body" style="white-space:normal"> HERE IS THE PROBLEM...If I change this h1 tag to <p> there is no blank page, but if I use the <h1> tag, there is a blank page between the pics <h1 style="text-align: center;" title="Title Page"><img alt="Misericordia Fourth Reader_Page_002" src="../Images/Misericordia%20Fourth%20Reader_Page_002.jpeg" /></h1> <p class="s9"><img alt="Misericordia Fourth Reader_Page_003" src="../Images/Misericordia%20Fourth%20Reader_Page_003.jpeg" /></p> </div> </body> </html> here is the css for h1 and p9 .h1{ font-align; center } body, div, p, h1, h2, h3, h4 { margin: 0; padding: 0; } .s9{ font-size: 87.5000%; text-align: center; }

11-20-2014, 03:05 AM	#5
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Ah, the blank space after image bug from iBooks. Try making the image smaller.

11-20-2014, 07:39 AM	#6
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	i also thought about it being image size, but I am not altering the image size at all, just changing the label from <h1> to <p> and it fixes the problem. The only reason I don't want to do that is because I want TOC

11-21-2014, 10:11 AM	#9
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Hitch, Thanks for the advice. I have only been using <p> around pics because it worked. What sort of problems might I encounter by cheating like this? Also, I have been tinkering all morning trying to style all the images for the entire book to be center. What do I need to put in the CSS? I haven't gotten this quite right yet.

Advert

Advert