Quote:
Originally Posted by GJ Coop
Ha, still going here, don't know why I don't just put myself out of my misery.
I have done a revision of the stylesheet for each book and have found a few anomalies which have been corrected.
For the record I had my images with two conflicting classes which still managed to show up OK in the public books all the same.
I had for some reason: list-style: none; instead of list-style-type: none;
I've switched that around.
My recent background is web development so my ebooks are very simple with the CSS, my file is just over 1k, there are not many classes, I have a basic seven. I see some of the automatically generated CSS files clock in at 30k. Having a look at how all over the place other people's markup is, a new class for each paragraph almost, I wonder how they troubleshoot that barrel of odds and ends.
The CSS looks like this with a few working classes left out.
The only things not working are the font-family, neither the "Abel" nor the sans-serif are seen, and the a{text-decoration: none;}.
Sorry to go on about this but I'd love to work it out.
Remember this all looks just fine when previewed using Book Preview and in the file downloaded on the Edit Book Details page of KDP.
|
It seems to me that you have made a mistake here:
Code:
p.title {
color: #e65c00;
font-family: "Abel", sans-serif;
font-size: 1em;
margin-top: 0.25em;
margin-bottom: 0.125em;
page-break-before: always;
text-align: center;
text-indent: 0; /*----> here you didn't close the style with "}" */
.toc {
font-family: "Abel", sans-serif;
font-size: 1em;
line-height: 1.4;
margin-left: 1em;
text-indent: 0;
}
Also I have seen that you are using <p class="title"> as your header paragraphs. Take in count that some Kindle models (i.e. Kindle Fire) only allows custom fonts in <h> tags so, it would would be a good idea for you to replace p.title with h1 (or h2, h3, etc.). Just replace p.title with (for example):
Code:
h4 {
color: #e65c00;
font-family: "Abel", sans-serif;
font-size: 1em;
margin-top: 0.25em;
margin-bottom: 0.125em;
page-break-before: always;
text-align: center;
text-indent: 0;
} /* Here don't forget to close the style :D */
And also would be a good idea to start anything with that <h4> tag in a new .xhtml file instead of using the property "page-break-before: always;". By using that property you'll find that sometimes your top margins are omitted (if you still are going to use "page-break-before: always;" then would be better to use "padding-top" instead of "margin-top").
Regards
Rubén