Overdrive file reading issues

[kk3]

I made an epub file in InDesign and converted it to a mobi file for Kindle, which is what the client will be selling the book for. The Kindle file appears to work correctly when viewed in the Kindle app, but they are looking at the epub file in Overdrive and there are a few issues. The superscripts are huge and one of the graphics is overlapping the text.

Any ideas how to fix those? I can sort of duplicate them when I view the file in the Overdrive app, but I am unfamiliar with Overdrive so I'm not totally sure how to fix it.

Thanks.

[IronChaim]

You'll need to post an example of your content, and related CSS to get some more help.

Also, by OverDrive - do you mean their OverDrive App or just through their service? What happens if you try to open the EPUB in ADE or another EPUB reader?

[JSWolf]

The problem is that the eBook was made in InDesign. You'll need to go into the code and have a look at it. It's most likely something that needs to be fixed in the CSS. Do not go back to ID to try to fix things. Without seeing the HTML code and the CSS, there's no way anyone can have a shot at figuring out what might be wrong.

[kk3]

I will take a look at the CSS. I can't get the file to duplicate what I am being told it is doing. What do you suggest I made ebook files in, if not InDesign?

This is the image that I am being told is overlapping text.
<div class="_idGenObjectLayout-1" id="_idContainer004"><img alt="" class="_idGenObjectAttribute-1" src="../Images/table_8-2.jpg" /></div>

[Turtle91]

That html looks fine, but we need to see what those classes are....for that item and those around it. Can you post the CSS for '_idGenObjectLayout-1' and '_idGenObjectAttribute-1' and whatever may be before and after the image??

[kk3]

Is this what you need?

<p class="Body-Text">Paul’s most direct appeal for discipleship is found in 2 Timothy 2:1–2: <span class="italics _idGenCharOverride-1">“You then, my child, be strengthened by the grace that is in Christ Jesus, and what you have heard from me in the presence of many witnesses entrust to faithful men, who will be able to teach others also.”</span> Here, Paul reminds Timothy to recognize the one who shared the message with him (Paul). He also reminds Timothy that it is necessary to continue the progress of the Gospel by taking what you have learned and sharing it with others (Timothy’s disciples). Note the four generations of believers included in Paul’s admonition to Timothy:</p>

<div class="_idGenObjectLayout-1" id="_idContainer004"><img alt="" class="_idGenObjectAttribute-1" src="../Images/table_8-2.jpg" /></div>

<p class="Body-Text">Based on the example of Paul, and his frequent admonitions to teach others, it is clear that Christ’s command to make disciples was taken seriously and obeyed during the apostolic age. His command is no less compelling to believers today.</p>
</div>
</body>
</html>

[Turtle91]

That's the HTML file. You should have a CSS file as well - something like "stylesheet.css" - that actually defines what those various classed do. That should look something like:

.Body-Text {margin:0; padding:0; text-indent:1.2em; text-align:left}
._idGenObjectLayout-1 {margin:0; padding:0; text-indent:0; text-align:center}
._idGenObjectAttribute-1 {width:50%; max-width:600px}

[kk3]

Here is the CSS. Sorry.

p.Body-Text {
color:#000000;
font-family:"Trebuchet MS", sans-serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.2;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:15px;
orphans:1;
page-break-after:auto;
page-break-before:auto;
text-align:left;
text-decoration:none;
text-indent:0;
text-transform:none;
widows:1;

img._idGenObjectAttribute-1 {
height:100.00%;
min-width:100%;
width:100.00%;
}
div._idGenObjectLayout-1 {
margin:4px auto 8px 0;
text-align:left;
}

[Turtle91]

That looks legal to me - and shouldn't be causing a problem. It may be that there is some other CSS with a higher priority that is causing the issue??

I would try cleaning it up a little bit and see if it helps. Replace those 3 classes with:

p.Body-Text {
color:#000000;
font-family:"Trebuchet MS", sans-serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.2;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:15px;
orphans:1;
page-break-after:auto;
page-break-before:auto;
text-align:left;
text-decoration:none;
text-indent:0;
text-transform:none;
widows:1;

img._idGenObjectAttribute-1 {
height:100.00%;
min-width:100%;
width:100.00%;
}
div._idGenObjectLayout-1 {
margin:4px auto 8px 0;
margin-top:1em;
margin-bottom:1em;
margin-left:0;
margin-right:0;
text-align:left;
}


edit: just changed the top/bottom margin to 1em on the div because I think .5em is too small and it was irritating me! lol

[kk3]

Thank you Turtle91. That seemed to fix it, at least as I am viewing it.

Do you know how to fix superscripts? They aren't showing up in the Overdrive viewer either. All is well in the mobi file, but not what the client is viewing the book on.

[JSWolf]

The thing is, classes with names like _idGenObjectAttribute-1 look robotic. They don't really mean anything.

Also,<span class="italics _idGenCharOverride-1"> where you could use <i> or <em> is also not nice code.

But what I'm really concerned about is table_8-2.jpg. Is that a graphic to replace a table that could have been done in the ePub? I can't stand when graphics are used instead of text where the text would work.

[Turtle91]

Do you have the CSS that is used on the superscripts??

[kk3]

I think this is it.

span._idGenCharOverride-3 {
font-size:58%;
}

[JSWolf]

I think 58% is too small.

[kk3]

The problem is that they are showing up as regular size in relation to the font size chosen in the epub.