I'm working on a gamebook for an eReader, and am noticing significant differences between what I see in Sigil and what is displayed in my Bluefire Reader. iReader displays everything beautifully, but Bluefire displays all the text clumped together, unordered lists start with a solid bullet but continues with white bullets, and links within custom tables do not allow navigation. I'm guessing this is an issue with the CSS I created for the document?
My process: I wrote the text in Microsoft Word, converted it to clean HTML, cleaned it up further in Dreamweaver, and am now organizing it as best I can with Sigil. (This is my first time working extensively with XML and ePubs, so I'm sure I'm making mistakes somewhere...)
Here is some relevant code from my CSS file:
Code:
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:1;
padding:0;
border-width:thin;
}
table {
border-collapse:collapse;
}
.Heading3 {
font-style: italic;
font-weight: bold;
text-align: left;
font-size: larger;
}
.TableSJ {
margin-top: 4px;
margin-bottom: -4px;
border-width: thin;
border-style: solid;
border-top-color: #000;
}
.CenteredChoice {
text-align: center;
}
Below is an example of basic text within paragraph tags, but Bluefire displays these without any spacing between <p> tags or headings, and all text is clumped together making the document rather difficult to read.
At the same time, Bluefire seems to pick and choose from the CSS. The Heading3 class I created displays correctly, while the <p> tag doesn't take on the required attributes.
Code:
<p>When mining your claim, follow the instructions on the roll table as described in the eBook. The roll table goes up to 10+, so use your bonuses to maximize your gold; the higher you roll, the more gold you receive.</p>
<p class="Heading3">Teamwork and Trading</p>
<p>You will find that you may be able to progress further with the help of other players. All gold, destiny cards (except fate cards), and mining bonus cards are tradable. Agreements between players are not binding, so beware of the double-cross!</p>
One more example of a table in which I am embedding links to other parts of the document. I can't click within the table on Bluefire, but within Sigil and iReader it works perfectly.
Code:
<p class="CenteredChoice">Enter the Chapter Marker number indicated on the Epic Track:</p>
<table align="center" border="0" cellpadding="4" cellspacing="10" class="TableSJ" width="80%">
<tr>
<td>
<p class="BodyLink"><a href="EpicStoryEvents.html#1x">1</a></p>
</td>
<td>
<p class="BodyLink"><a href="EpicStoryEvents.html#2x">2</a></p>
</td>
<td>
<p class="BodyLink"><a href="EpicStoryEvents.html#3x">3</a></p>
</td>
</tr>
</table>
Thank you for your help!