Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 01-21-2013, 07:02 PM   #1
tenntexjlw
Junior Member
tenntexjlw began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Jun 2012
Device: kindle
style sheet works in browsers but not in epub file

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;
}
tenntexjlw is offline   Reply With Quote
Old 01-22-2013, 02:30 AM   #2
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
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.
GrannyGrump is offline   Reply With Quote
Old 01-22-2013, 03:53 AM   #3
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 27,463
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
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.
DiapDealer is offline   Reply With Quote
Old 01-22-2013, 04:17 AM   #4
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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?
Jellby is offline   Reply With Quote
Old 01-22-2013, 06:48 AM   #5
mzmm
Groupie
mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.
 
mzmm's Avatar
 
Posts: 171
Karma: 86271
Join Date: Feb 2012
Device: iPad, Kindle Touch, Sony PRS-T1
you've got errors in your font-family declarations:

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

i recommend cssLint

Last edited by mzmm; 01-22-2013 at 06:52 AM.
mzmm is offline   Reply With Quote
Old 01-22-2013, 07:16 AM   #6
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Shouldn't they be quoted too (at least where there are spaces)?

Code:
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
Jellby is offline   Reply With Quote
Old 01-22-2013, 07:38 AM   #7
mzmm
Groupie
mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.
 
mzmm's Avatar
 
Posts: 171
Karma: 86271
Join Date: Feb 2012
Device: iPad, Kindle Touch, Sony PRS-T1
Quote:
Originally Posted by Jellby View Post
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

Code:
Palatino Linotype
=

Code:
"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

Last edited by mzmm; 01-22-2013 at 07:42 AM.
mzmm is offline   Reply With Quote
Old 01-24-2013, 08:36 PM   #8
tenntexjlw
Junior Member
tenntexjlw began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Jun 2012
Device: kindle
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 is offline   Reply With Quote
Old 01-24-2013, 10:22 PM   #9
tenntexjlw
Junior Member
tenntexjlw began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Jun 2012
Device: kindle
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>
tenntexjlw is offline   Reply With Quote
Old 01-25-2013, 03:50 AM   #10
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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.
Jellby is offline   Reply With Quote
Old 01-25-2013, 04:04 AM   #11
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 27,463
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Bulleted or numbers. I don't think there's any other options for lists in the old-style mobi.
DiapDealer is offline   Reply With Quote
Old 01-25-2013, 05:47 AM   #12
tenntexjlw
Junior Member
tenntexjlw began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Jun 2012
Device: kindle
hard coding nested list markers

Quote:
Originally Posted by Jellby View Post
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?
tenntexjlw is offline   Reply With Quote
Old 01-25-2013, 06:44 AM   #13
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
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.
mrmikel is offline   Reply With Quote
Old 01-25-2013, 02:03 PM   #14
tenntexjlw
Junior Member
tenntexjlw began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Jun 2012
Device: kindle
hard coding nested list markers

Quote:
Originally Posted by mrmikel View Post
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
tenntexjlw is offline   Reply With Quote
Old 01-25-2013, 04:21 PM   #15
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
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.
mrmikel is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Print style sheet ronaldl Sigil 2 10-29-2012 04:32 PM
Style Sheet editor? GraciousMe Sigil 6 06-04-2012 03:06 PM
An example file of your CSS style sheet roger64 Writer2ePub 6 04-11-2012 02:59 AM
Missing style sheet mauvais Barnes & Noble NOOK 3 12-05-2011 06:29 PM
xthml file not refer to style sheet droople Sigil 11 08-22-2010 01:35 PM


All times are GMT -4. The time now is 11:20 AM.


MobileRead.com is a privately owned, operated and funded community.