Text Overlapping Image in Nook for PC, Help

dvrader · 12-18-2012, 02:31 AM

I'm designing an ebook for a client, and I'm having a problem with the text overlapping the image when the epub is loaded into the Nook for PC. It works on the Nook Color, Touch, and Mac version.

The client is adamant that he wants this to work in the PC viewer. Please help.

Code and screenshot are below.

<h3 id="sigil_toc_id_33" style="text-align: center;">The SAT – Your Gateway to Heaven or Hell</h3>

<p style="text-align: center;"><img alt="" src="../Images/SAT_464x600.jpg" /><br /></p>

<p style="text-align: justify;">It’s impossible to overstate how important your SAT results are to your Indian parents. Sure, your grades are important, but they pale in comparison to the singular importance of the SAT. Think of your SAT score as a medical test result that tells your parents whether <em>they</em> are going to live or die. Knowing this helps you understand why your parents will be stressed as shit during the few years leading up to your taking the SAT.</p>

h3 {
font-family: sans-serif;
text-align: center;
line-height: 1em;
margin-top: 2em;
}

p {
font-family: serif;
font-height: 1.17em;
line-height: 1.60em;
text-indent:1.5em !important;
margin: 0em 0em 1em 0em;
}

theducks · 12-18-2012, 04:49 AM

you have not controlled the image size (scaled) from the original (if I guessed right) 464x600.

text-align is not always a perfect way to center images

mrmikel · 12-18-2012, 05:43 AM

It might need to be shrunk about 20 pixels to avoid spillover. No need for that break in the image paragraph either.

DiapDealer · 12-18-2012, 06:21 AM

What's "font-height"?

theducks · 12-18-2012, 07:08 AM

Quote:

Originally Posted by DiapDealer

What's "font-height"?

Missed that one.
ADE would probably choke on that one alone

12-18-2012, 02:31 AM	#1
dvrader Junior Member Posts: 3 Karma: 10 Join Date: Dec 2012 Device: All	Text Overlapping Image in Nook for PC, Help I'm designing an ebook for a client, and I'm having a problem with the text overlapping the image when the epub is loaded into the Nook for PC. It works on the Nook Color, Touch, and Mac version. The client is adamant that he wants this to work in the PC viewer. Please help. Code and screenshot are below. <h3 id="sigil_toc_id_33" style="text-align: center;">The SAT – Your Gateway to Heaven or Hell</h3> <p style="text-align: center;"><img alt="" src="../Images/SAT_464x600.jpg" /><br /></p> <p style="text-align: justify;">It’s impossible to overstate how important your SAT results are to your Indian parents. Sure, your grades are important, but they pale in comparison to the singular importance of the SAT. Think of your SAT score as a medical test result that tells your parents whether <em>they</em> are going to live or die. Knowing this helps you understand why your parents will be stressed as shit during the few years leading up to your taking the SAT.</p> h3 { font-family: sans-serif; text-align: center; line-height: 1em; margin-top: 2em; } p { font-family: serif; font-height: 1.17em; line-height: 1.60em; text-indent:1.5em !important; margin: 0em 0em 1em 0em; }

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Image overlayed over text (but text visible if image disabled)?	Kaylee Skylyn	ePub	5	08-01-2012 05:27 PM
Converting Sleepyhead from mobi to epub overlapping text.	travisp	Conversion	5	05-13-2012 02:24 PM
Overlapping text when converting html to mobi/epub	TopCat	Conversion	4	11-28-2011 06:13 AM
Overlapping text	jeeperz	Kobo Reader	23	09-26-2011 09:03 PM
EPUB Overlapping Text - Please Help	coaver	Calibre	16	07-27-2010 12:40 AM

12-18-2012, 04:49 AM	#2
theducks Well trained by Cats Posts: 29,798 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	you have not controlled the image size (scaled) from the original (if I guessed right) 464x600. text-align is not always a perfect way to center images

12-18-2012, 05:43 AM	#3
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	It might need to be shrunk about 20 pixels to avoid spillover. No need for that break in the image paragraph either.

12-18-2012, 06:21 AM	#4
DiapDealer Grand Sorcerer Posts: 27,547 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	What's "font-height"?

Advert

Advert