I'm using Sigil to create epubs and iBooks primarily to preview them, and I have a recurring CSS problem that's driving me nuts. I'm not really sure if it's just a problem with spans or with a variety of nested elements, but here goes...
Imagine a div that has a CSS style specifying font families, either inline or in an attacked style sheet...
<div style="font-family: Arial, Verdana, sans-serif; font-size: 75%;">Text</div>
If I put a span inside that div, it may or may not inherit the div's CSS properties. Most of the time, I think it inherits all the properties EXCEPT font families. If I give the span its own CSS rule, it still doesn't work. In the following example, all the text is relatively small (75%), as it should be, and the text in the span is red. But the text in the span has serifs, when it should look the same as the text surrounding it.
<div style="font-family: Arial, Verdana, sans-serif; font-size: 75%;">Text <span style="font-family: Arial, Verdana, sans-serif; color: #f00;">Red Text</span></div>
I've tried various combinations of inline styles vs style sheets. It seems to be some kind of bug, because sometimes the text inside a certain element will look OK on one page, but the same combination of classes and styles doesn't work on the next page.
Things usually look OK in Sigil, but when I open my project in iBooks, the errors appear.
I should add that I haven't installed any fonts in my epub. About all I'm using are Arial and Verdana, which are installed in my computer and presumably in most people's computers.
Does anyone have a clue what's going on?