View Full Version : style sheet works in browsers but not in epub file


tenntexjlw
01-21-2013, 07:02 PM
I use a lot of multi-level ordered lists and while the html and css styling I use seems to display correctly in browsers, I have found that when I put the same stylesheet and html content files in an epub file the stylesheet no longer controls the formatting of the content.


A sample epub file had this code in a stylesheet

[

body {
font-family: sans-serif;
}
h1,h2,h3,h4 {
font-family: serif;
color: red;
}

]

I added the following code to the style sheet to control a multi-level ordered list with many different list markers. This works fine in browsers, but when I add the code below to the stylesheet code above and zip it into an epub file it has the same affect as completely deleting the style sheet from the epub file. Something in the code below disables the code above in the epub document but not in a normal browser html display. Can someone tell me why this is happening? Thanks for any help.


[


.olclass1{
font-family: times new roman; serif;
font-size: 15px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #660033;
text-decoration: none;
background-color: #FFFF99;
text-indent: 0px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: decimal;
padding-left: 0px;
margin-left: 150px;
}

.olclass2{
font-family: Courier New; Courier; monospace;
font-size: 15px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
background-color: #FFFF99;
text-indent: 0px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: lower-alpha;
padding-left: 0px;
margin-left: 30px;
}



.olclass3{
font-family: Verdana; sans-serif;
font-size: 15px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FF0000;
text-decoration: none;
background-color: #FFFF99;
text-indent: 0px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: circle;
padding-left: 0px;
margin-left: 30px;
}

.olclass4{
font-family: Impact; sans-serif;
font-size: 15px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #0000FF;
text-decoration: none;
background-color: #FFFF99;
text-indent: 0px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: upper-alpha;
padding-left: 0px;
margin-left: 30px;
}

.olclass5{
font-family: Comic Sans MS; sans-serif;
font-size: 15px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #281400;
text-decoration: none;
background-color: #FFFF99;
text-indent: 0px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: lower-roman;
padding-left: 0px;
margin-left: 30px;
}

.olclass6{
font-family: Palatino Linotype; Book Antiqua; Palatino; serif;
font-size: 15px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #006666;
text-decoration: none;
background-color: #FFFF99;
text-indent: 0px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: decimal-leading-zero;
padding-left: 0px;
margin-left: 30px;
}



.olclass7{
font-family: Tahoma; sans-serif;
font-size: 15px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #800000;
text-decoration: none;
background-color: #FFFF99;
text-indent: 0px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: disc;
padding-left: 0px;
margin-left: 30px;
}


.olclass8{
font-family: Tahoma; sans-serif;
font-size: 15px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #800000;
text-decoration: none;
background-color: #FFFF99;
text-indent: 0px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: upper-roman;
padding-left: 0px;
margin-left: 30px;
}


.olclass9{
font-family: Tahoma; sans-serif;
font-size: 15px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #800000;
text-decoration: none;
background-color: #FFFF99;
text-indent: 0px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: square;
padding-left: 0px;
margin-left: 30px;
}

GrannyGrump
01-22-2013, 02:30 AM
Are those square brackets actually appearing in the stylesheet, or are they something you added for your copy & paste example.

If the former, I believe you need to delete those.

DiapDealer
01-22-2013, 03:53 AM
I'm guessing the relative path used to link the stylesheet to the (x)html is incorrect for the internal structure of the epub (and that path is case sensitive). Would need to see the link in the head of the html document(s) as well as the folder structure of the epub to offer any real trouble-shooting.

Jellby
01-22-2013, 04:17 AM
A single typo in a stylesheet makes ADE ignore the whole lot. Have you validated the stylesheet with W3C?

Also, lists are known to cause troubles with ePub, have you checked all the properties you use are supported by the ePub spec?

mzmm
01-22-2013, 06:48 AM
you've got errors in your font-family declarations:

font-family: Verdana; sans-serif;
font-family: Palatino Linotype; Book Antiqua; Palatino; serif;

should be
font-family: Verdana, sans-serif;
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;

etc

i recommend cssLint

Jellby
01-22-2013, 07:16 AM
Shouldn't they be quoted too (at least where there are spaces)?

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

mzmm
01-22-2013, 07:38 AM
Shouldn't they be quoted too (at least where there are spaces)?

er, yes, i guess that's best practice, although according to CSS 2.1 it's not absolutely necessary. CSS 2.1 states that

"Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces."

so a reader will(should) compute that

Palatino Linotype

=

"Palatino Linotype"

there would only be a problem if the font name were to contain a digits, punctuation, or reserved keywords like 'inherit', 'serif', 'sans-serif', 'monospace', 'fantasy', or 'cursive', in which case the tokens should be escaped or the font names should be quoted.

CSS 2.1 on font-family here: http://www.w3.org/TR/CSS2/fonts.html#font-family-prop

tenntexjlw
01-24-2013, 08:36 PM
Thanks for all the replies. I fixed the problem as far as the epub file goes by validating all my html. I had been assuming a correct display in 5 different browsers meant the code was ok. That was not the case. I still have the problem that I cannot get a mobi file to display different list markers at different levels of a nested list. It makes the list markers at all levels decimal numbers regardless of the styling. When I use KindleGen to convert the epub to mobi, the mobi file displays the nested lists with the correct list markers in the Kindle for pc app but not in the Kindle previewer or mobipocket reader. Can it be that it is impossible to have different list markers at different levels of a nested list in the older Kiindle viewers. Because I had viewed my Amazon kindle files only in the Kindle for pc viewer, I had thought the files were ok. I have yet to be able to see a nested list displayed in Kindle previewer or MobiPocket reader with different list markers at the different levels of a nested list. Does anyone know if this is even possible and, if so, how do you do it. Thanks,

tenntexjlw
01-24-2013, 10:22 PM
The following code validates as good but in the MobiPocket Creator created mobi file made from it, all the second and third legel list markers are changed to decimal numbers. How can I get a nested list like this to display correctly in a mobi file?

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<title>A Nested List Example</title>
</head>
<body>

<h2>Under this Heading is a Three Level Nested List</h2>


<ol style="list-style-type:decimal">
<li>First top-level item of the nested list:
<ol style="list-style-type:lower-alpha">
<li>First second-level item:
<ol style="list-style-type:lower-roman">
<li>First third level item.</li>
<li>Second third level item.</li>
<li>Third third level item.</li>
<li>Fourth third level item.</li>
</ol>
</li>

<li>Second second-level item:
<ol style="list-style-type:lower-roman">
<li>First third level item.</li>
<li>Second third level item.</li>
<li>Third third level item.</li>
<li>Fourth third level item.</li>
</ol>
</li>
</ol>
</li>
<li>Second top-level item of the nested list:
<ol style="list-style-type:lower-alpha">
<li>First second-level item:
<ol style="list-style-type:lower-roman">
<li>First third level item.</li>
<li>Second third level item.</li>
<li>Third third level item.</li>
<li>Fourth third level item.</li>
</ol>
</li>


<li>Second second-level item:
<ol style="list-style-type:lower-roman">
<li>First third level item.</li>
<li>Second third level item.</li>
<li>Third third level item.</li>
<li>Fourth third level item.</li>
</ol>
</li>
</ol>
</li>
</ol>



</body>
</html>

Jellby
01-25-2013, 03:50 AM
I don't think it's possible to have nested lists (or nested anything) in old mobi. And lists are a devil's device in any format, so you'd better hard-code the markers to whatever you want.

DiapDealer
01-25-2013, 04:04 AM
Bulleted or numbers. I don't think there's any other options for lists in the old-style mobi.

tenntexjlw
01-25-2013, 05:47 AM
I don't think it's possible to have nested lists (or nested anything) in old mobi. And lists are a devil's device in any format, so you'd better hard-code the markers to whatever you want.

Thanks for the reply. You confirmed what my experience indicated was the case.

If it is possible to "hard code" the markers, I am curious how that is done.

How do I make this nested list code harder?

mrmikel
01-25-2013, 06:44 AM
By hard code they mean enter the numbers directly. 1. 2. 3. etc, rather than relying on the machine to generate the numbers for you.

1. This is the first item

2. This is the second

instead of <ol>
<li>

etc.

tenntexjlw
01-25-2013, 02:03 PM
By hard code they mean enter the numbers directly. 1. 2. 3. etc, rather than relying on the machine to generate the numbers for you.

1. This is the first item

2. This is the second

instead of <ol>Th
<li>

etc.
=========================================
I see. That makes sense and I had not thought of that before.

Thanks

mrmikel
01-25-2013, 04:21 PM
It is a bad habit to get hung up on ordered lists. It inclines some people to change
a. This is some text
b. The is more text

into
1.This is some text
2.The is more text

Also some conventions like a start tag if you have a page break are not proper in epubs.

To get a nested appearance you can use <p> tags having differnt margins in the stylesheet. Like
.firstlevel {margin-left:5%;}
and make a second with a larger left margin percentage and so on. Such as <p class="firstlevel">

To automate it you can use the clips function in Sigil and then just right click to insert the proper level into the paragraph tag.