css formatting not showing in ADE?

bfollowell · 10-08-2011, 01:14 PM

I'm not sure if I'm having a problem with Sigil or if this is a "me" issue. I've created a new epub using the same techniques that I always use. The problem is when I look at this epub in ADE, I don't see any of the special css formatting I've created. I see the italics and bold text that I setup using <em> and <strong> tags in the text itself but nothing setup in the css is making it through. I also have embedded fonts that are not showing, probably because the css doesn't seem to be working.

I used the same techniques I always use but I've never experienced this before. The formatting looks fine in Sigil and I get no errors when I validate. The same epub converts to mobi just fine using Calibre so I'm fairly certain there's no problem with the css or the calls to the css but problems with the css seem to be the most likely culprit from what I'm seeing, or not seeing in ADE.

Has anyone ever experienced anything like this before? I've checked everything I can think of to check and I'm batting zero. Any ideas or assistance would be greatly appreciated.

Thanks in advance.

- Byron

sellew · 10-08-2011, 02:38 PM

I've experienced something like this a couple of times. I found out that it was just a mistyped attribute or value in the css: it seems that while Sigil ignores just this mistake, ADE ignores the whole css stylesheet. It can be something as trivial as a missing ";" or ":" or also a mistyping like "font-sze" instead of "font-size".
I suggest you to re-read very carefully your css; in my case it took me several attempts before I found the mistake (sometimes our brains work in 'auto-correct' mode)

shall1028 · 10-08-2011, 02:42 PM

Let's see...without a sample from the CSS in question I will have to make an evaluation and perhaps provide a potential solution to your problems blind. So here goes...

I suspect the problem is that you have typed every in your CSS file backwards and that is why it is not being recognized. For example:

instead of

blockquote { margin: 0.1em 0 0.1em 0; padding:0; }

you might have

} ;0:gniddap; 0 me1.0 0 me1.0 :nigram { etouqkcolb

Now, someone might have a better guess than I do and if I get a chance to see the CSS first hand I will probably come up with a better solution.

bfollowell · 10-08-2011, 03:45 PM

Quote:

Originally Posted by shall1028

Let's see...without a sample from the CSS in question I will have to make an evaluation and perhaps provide a potential solution to your problems blind. So here goes...

I suspect the problem is that you have typed every in your CSS file backwards and that is why it is not being recognized. For example:

instead of

blockquote { margin: 0.1em 0 0.1em 0; padding:0; }

you might have

} ;0:gniddap; 0 me1.0 0 me1.0 :nigram { etouqkcolb

Now, someone might have a better guess than I do and if I get a chance to see the CSS first hand I will probably come up with a better solution.

You know what they say about everyone hating a smart alec (fill in your own word in place of alec here) don't you?

Sorry, I should've thought of that but I've been pulling my hair out on this thing and am just not thinking straight. Here is my css:

Code:

body {
    display: block;
    font-size: 1em;
    margin-bottom: 0;
    margin-left: 5pt;
    margin-right: 5pt;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    page-break-before: always;
    text-align: justify;
    font-family: "Charis";
    }
@font-face {
    font-family: "Charis";
    font-style: normal;
    font-weight: normal;
    src:url(../Fonts/CharisSILR.ttf);
    }
@font-face {
    font-family: "Charis";
    font-style: normal;
    font-weight: bold;
    src:url(../Fonts/CharisSILB.ttf);
    }
@font-face {
    font-family: "Charis";
    font-style: italic;
    font-weight: normal;
    src:url(../Fonts/CharisSILI.ttf);
    }
@font-face {
    font-family: "Charis";
    font-style: italic;
    font-weight: bold;
    src:url(../Fonts/CharisSILBI.ttf);
    }
.appheader1 {
    display: block;
    font-size: 1.24999875em;
    font-weight: bolder;
    line-height: 1.2;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 3%;
    text-align: center
    }
.appheader2 {
    display: block;
    font-size: 1.125em;
    font-weight: bolder;
    line-height: 1.2;
    margin-bottom: 4%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    text-align: center
    }
.bolder {
    font-weight: bolder
    }
.chapterOpenerText {
    display: block;
    font-size: 1em;
    font-style: normal;
    margin-bottom: 0.25em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-indent: 0%;
    }
.chaptertitle {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10%;
    text-align: center;
    }
.contents {
    display: block;
    page-break-before: always;
    }
.contentsEntry1 {
    display: block;
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 0;
    margin-left: 0em;
    margin-right: 0;
    margin-top: 0;
    text-align: left;
    text-indent: 0;
    color: blue;
    cursor: pointer;
    text-decoration: underline
    }
.contentsEntry2 {
    display: block;
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 0;
    margin-left: 2em;
    margin-right: 0;
    margin-top: 0;
    text-align: left;
    text-indent: 0;
    color: blue;
    cursor: pointer;
    text-decoration: underline
    }
.copyrightText {
    display: block;
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 0%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    text-align: justify;
    text-indent: 0%;
    }
.crewlist {
    display: block;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em
    }
.ded {
    display: block
    font-weight: normal;
    margin-top: 30%;
    text-align: center;
    }
.epigraphSource {
    display: block;
    font-size: 1em;
    font-style: normal;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 5%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    text-align: center;
    }
.epigraphText {
    display: block;
    font-size: 1em;
    font-style: normal;
    line-height: 1.2;
    margin-bottom: 1em;
    margin-left: 8%;
    margin-right: 8%;
    margin-top: 30%;
    text-indent: 0%;
    text-align: center;
    }
.italic {
    font-style: italic
    }
.mbppagebreak {
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    page-break-after: always;
    }
.para {
    display: block;
    font-size: 1em;
    margin-bottom: 0.25em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-indent: 5%;
    }
.paraspaceNoIndent {
    display: block;
    font-size: 1em;
    margin-bottom: 0.25em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 3em;
    text-indent: 0;
    }
.partNumber {
    display: block;
    font-size: 3em;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 8%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 40%;
    text-align: center
    }
.teaserHeader {
    display: block;
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 2em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 5%;
    page-break-before: always;
    text-align: center;
    }
.titlepg {
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: center;
    }
.toc {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    text-align: center;
    text-indent: 0;
    }

theducks · 10-08-2011, 03:49 PM

Quote:

Originally Posted by bfollowell

I'm not sure if I'm having a problem with Sigil or if this is a "me" issue. I've created a new epub using the same techniques that I always use. The problem is when I look at this epub in ADE, I don't see any of the special css formatting I've created. I see the italics and bold text that I setup using <em> and <strong> tags in the text itself but nothing setup in the css is making it through. I also have embedded fonts that are not showing, probably because the css doesn't seem to be working.

I used the same techniques I always use but I've never experienced this before. The formatting looks fine in Sigil and I get no errors when I validate. The same epub converts to mobi just fine using Calibre so I'm fairly certain there's no problem with the css or the calls to the css but problems with the css seem to be the most likely culprit from what I'm seeing, or not seeing in ADE.

Has anyone ever experienced anything like this before? I've checked everything I can think of to check and I'm batting zero. Any ideas or assistance would be greatly appreciated.

Thanks in advance.

- Byron

ADE is very picky about CSS validity.

one tiny typo and it ignores that style.

missing or wrong punctuation, spelling, invalid arguments (2empx)

Magnify (zoom that pane in Sigil) that puppy and look carefully at each and every detail.

bfollowell · 10-08-2011, 04:20 PM

Quote:

Originally Posted by theducks

ADE is very picky about CSS validity.

one tiny typo and it ignores that style.

missing or wrong punctuation, spelling, invalid arguments (2empx)

Magnify (zoom that pane in Sigil) that puppy and look carefully at each and every detail.

You're the second one to mention that. I use a fairly standard set of css options that I have saved over time and copy & paste them in so it's not like I type them in. Still, I'll often tweak them afterwards to get the right feel and I'm sure I could've easily flubbed something. I'll search through and look for what I may've messed up.

For what it's worth, a Calibre conversion from epub to epub corrected the issue but I'm not sure what else it may've changed in the process. Plus, as is typical for Calibre, it added a ton of it's own junk that I'd prefer not to have. Hopefully I'll be able to find my mistake and correct my version.

Thanks again to everyone for the advice.

- Byron

bfollowell · 10-08-2011, 04:29 PM

Got it!

Thanks to everyone for recommending that I look for my own typos. I'd edited several of my css classes and I'd deleted an ending semicolon on one of the lines for one of the classes. That's what was causing ADE to ignore the whole css.

Thanks again for your help.

- Byron

dwig · 10-08-2011, 04:41 PM

Quote:

Originally Posted by bfollowell

Got it!

Thanks to everyone for recommending that I look for my own typos. I'd edited several of my css classes and I'd deleted an ending semicolon on one of the lines for one of the classes. That's what was causing ADE to ignore the whole css.

Thanks again for your help.

- Byron

After catching myself making this same mistake a second time I've begun forcing myself to always add the ending semi-colon to all entries in a style, even the last one where its optional. When editing, I've added a line to a style more than once and forgotten to add the semi-colon to the line that was, but is no longer, the last line.

Toxaris · 10-09-2011, 02:13 PM

I agree, I tend to always set the end semi-colon even if it is not required. This helps me to keep things organized and when I change a line later there is never an issue. At least, not about the colons...

bfollowell · 10-09-2011, 07:28 PM

I know what you mean. I do this as well. I think this was a case of me fat-fingering and deleting it without realizing it. I just need to remember this if ever run into this problem again.

- Byron

10-08-2011, 01:14 PM	#1
bfollowell Fanatic Posts: 541 Karma: 1152752 Join Date: Aug 2010 Location: Evansville, IN, USA Device: Samsung Galaxy Tab 4 Nook & Samsung Galaxy Tab S 10.5	css formatting not showing in ADE? I'm not sure if I'm having a problem with Sigil or if this is a "me" issue. I've created a new epub using the same techniques that I always use. The problem is when I look at this epub in ADE, I don't see any of the special css formatting I've created. I see the italics and bold text that I setup using <em> and <strong> tags in the text itself but nothing setup in the css is making it through. I also have embedded fonts that are not showing, probably because the css doesn't seem to be working. I used the same techniques I always use but I've never experienced this before. The formatting looks fine in Sigil and I get no errors when I validate. The same epub converts to mobi just fine using Calibre so I'm fairly certain there's no problem with the css or the calls to the css but problems with the css seem to be the most likely culprit from what I'm seeing, or not seeing in ADE. Has anyone ever experienced anything like this before? I've checked everything I can think of to check and I'm batting zero. Any ideas or assistance would be greatly appreciated. Thanks in advance. - Byron

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
ADE won't use Sigil css file	Phanes	Sigil	6	10-22-2010 01:29 PM
Classic Book covers not showing up in ADE library?	tiniree	Barnes & Noble NOOK	1	10-04-2010 01:43 PM
3-level TOC showing wrong in ADE	CrystalEYE	ePub	1	07-15-2010 02:49 PM
ADE mit userstyle css	mtravellerh	PocketBook	0	05-21-2010 03:40 PM
CSS Styling not showing up in digital editions	sjkramer	Sigil	9	01-30-2010 10:46 AM

10-08-2011, 02:38 PM	#2
sellew Enthusiast Posts: 30 Karma: 300 Join Date: Oct 2011 Location: Barcelona Device: Sony PRS-650, PRS-T2	I've experienced something like this a couple of times. I found out that it was just a mistyped attribute or value in the css: it seems that while Sigil ignores just this mistake, ADE ignores the whole css stylesheet. It can be something as trivial as a missing ";" or ":" or also a mistyping like "font-sze" instead of "font-size". I suggest you to re-read very carefully your css; in my case it took me several attempts before I found the mistake (sometimes our brains work in 'auto-correct' mode)

10-08-2011, 02:42 PM	#3
shall1028 Nameless Being	Let's see...without a sample from the CSS in question I will have to make an evaluation and perhaps provide a potential solution to your problems blind. So here goes... I suspect the problem is that you have typed every in your CSS file backwards and that is why it is not being recognized. For example: instead of blockquote { margin: 0.1em 0 0.1em 0; padding:0; } you might have } ;0:gniddap; 0 me1.0 0 me1.0 :nigram { etouqkcolb Now, someone might have a better guess than I do and if I get a chance to see the CSS first hand I will probably come up with a better solution.

10-08-2011, 04:29 PM	#7
bfollowell Fanatic Posts: 541 Karma: 1152752 Join Date: Aug 2010 Location: Evansville, IN, USA Device: Samsung Galaxy Tab 4 Nook & Samsung Galaxy Tab S 10.5	Got it! Thanks to everyone for recommending that I look for my own typos. I'd edited several of my css classes and I'd deleted an ending semicolon on one of the lines for one of the classes. That's what was causing ADE to ignore the whole css. Thanks again for your help. - Byron

10-09-2011, 02:13 PM	#9
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	I agree, I tend to always set the end semi-colon even if it is not required. This helps me to keep things organized and when I change a line later there is never an issue. At least, not about the colons...

10-09-2011, 07:28 PM	#10
bfollowell Fanatic Posts: 541 Karma: 1152752 Join Date: Aug 2010 Location: Evansville, IN, USA Device: Samsung Galaxy Tab 4 Nook & Samsung Galaxy Tab S 10.5	I know what you mean. I do this as well. I think this was a case of me fat-fingering and deleting it without realizing it. I just need to remember this if ever run into this problem again. - Byron

Advert

Advert