style sheet works in browsers but not in epub file

[tenntexjlw]

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;
}

[VIPStephan]

Check your CSS for validity. If you have invalid rules browsers might ignore everything that follows because it becomes all invalid then.

Specifically, you are using semicolons in your font declarations where commas would be applicable.

Oh and if you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.