1

I'm working on an epub in Sigil. Things are going pretty good, but I'm puzzled by some kind of CSS bug.

For example, I want all the fonts in the table of contents section to be sans-serif. So I put the following rule in the style sheet attached to that page:

body { font-family: sans-serif; }

But font inside certain elements was still serif.

So I added some inline styles, but that didn't work. So I gave some of these elements classes, then changed the style sheet to this:

body, div.Plants { font-family sans-serif; }

That works better...but it still doesn't work on elements inside elements. For example...

<div class="Plants">This is a <span>nested element</span>.</div>

When I preview my epub, the text inside the span displays with a serif font. I can't fix it with inline fonts or by adding the span to my style sheet.

Is there some sort of secret to making style sheets communicate with pages in epubs?

Improve this question
7
  • Clarifying questions: how are you testing? What devices/reading systems? Have you verified that your CSS validates? jigsaw.w3.org/css-validator
    – idiotprogrammer
    Apr 16 '17 at 18:13
  • Generally I haven't had any problems getting fonts to work on the manual TOC page. Frequently though, two CSS declarations are in confict, so it may help to use the browser inspector (by right-clicking the web page) to verify which classes apply to an element.
    – idiotprogrammer
    Apr 16 '17 at 18:16
  • Some misspellings on what you pasted: no colon after font-family . I assume this is not the issue.
    – idiotprogrammer
    Apr 16 '17 at 18:18
  • I'm viewing my epubs with iBooks. I haven't converted any of them to Kindle yet. Thanks for the tip about the missing colon; yes, that was just a typo above. I haven't validated the CSS, but I can give that a try. Things just seem to be really fickle. Everything works fine until I make some tiny change. I don't have this problem with my web pages.
    – WordBear
    Apr 17 '17 at 2:40
  • Actually, you may have already solved the problem. I thought there might be some well known problem with CSS in epubs, but it sounds like this is either a case of operator error or some nitpicky issue I just have to isolate.
    – WordBear
    Apr 17 '17 at 2:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.