Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Location
    Houston, TX
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

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


    Code:
    .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;
    }
    Last edited by VIPStephan; 01-22-2013 at 02:13 AM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •