View Full Version : ePub not using CSS


luthar28
03-02-2011, 03:02 PM
Okay, I'm pulling out my hair. For some reason, my latest conversion isn't registering the CSS. I've even copied and pasted the CSS from a successful conversion into this one...removed every chunk I could find...blah, blah...can't find the error.

Hell, the thing even validates just fine.

But when I open it in Sigil, for instance, the style sheet has only one entry. Plus, instead of the thirty chapters, it's only been spliced into 3 sections (and I can't even figure out what sets those three sections apart).

I know this is a very broad question -- but does anyone have any ideas of what I might've done wrong?

luthar28
03-02-2011, 03:18 PM
And here's the CSS I'm using:

<style type="text/css" media="screen"><!--

img.sgc-1 {width:300px;
max-width:100%;}

.backcover {
height: auto;
max-width: 100%;
width: 600px;}

h3 {display: block;
font-size: 2em;
font-weight: bold;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
margin-top: 0.83em;
page-break-before: always;
text-align: center;
font-family: sans-serif;}

h3.Chapter {
text-align: right;
}

img.czp {
height: auto;
margin-top: 2em;
max-width: 40%;
width: 100px;
margin: auto;
}

.center1 {
display: block;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
text-align: center;
}

p.chizine-body-indent- {
display: block;
font-size: 1em;
margin-bottom: 0.3em;
margin-left: auto;
margin-right: auto;
margin-top: 0.3em;
text-align: left;
text-indent: 25pt;
}

.spacer {
display: block;
margin-bottom: 1.2em;
}

p.chizine-body-no-indent- {
display: block;
font-size: 1em;
margin-bottom: 0.3em;
margin-left: auto;
margin-right: auto;
margin-top: 0.3em;
text-align: left;
text-indent: 0pt;}

.smaller {
font-size:85%;
}
.pagebreak {
display: block;
page-break-before: always;
}



--></style>

EowynCarter
03-02-2011, 03:43 PM
Mmm, conversion ?
From what format ? To what format ? With what software ?

luthar28
03-02-2011, 03:44 PM
Mmm, conversion ?
From what format ? To what format ? With what software ?

Straight HTML into ePub using Calibre. I know that often times one incorrect tag can cause real problems. But I just cannot spot what I've done wrong!

Is there another html to ePub conversion program?

DMSmillie
03-02-2011, 07:10 PM
I take it you've used the MEDIA attribute before without any problem? I haven't had any reason to use that so don't know one way or the other, but wondering if Calibre might be barfing on it?

Adjust
03-02-2011, 08:00 PM
Upload your CSS file to Here (http://jigsaw.w3.org/css-validator/#validate_by_upload+with_options) to check is anything is wrong...

luthar28
03-02-2011, 09:47 PM
Upload your CSS file to Here (http://jigsaw.w3.org/css-validator/#validate_by_upload+with_options) to check is anything is wrong...

Cool page. I've bookmarked it for future reference.

However, my CSS came back clean. No ideas.

I created the ePub using Sigil (I honestly didn't know I could create one...I thought it was only for editing) and it displays just fine. Really wish I knew what the heck went wrong with Calibre though. Very bizarre.

theducks
03-02-2011, 10:05 PM
<style type="text/css" media="screen"><!--

< style stuff snipped>

--></style>

Because those marks mean ? (test at 6 :rolleyes: )

The stuff between is a COMMENT :smack:

DMSmillie
03-02-2011, 10:54 PM
That's standard practice when coding a web page - stops the browser trying to interpret the CSS as HTML (though I suspect that's only something that's an issue for older browser versions). However, yes, it might well be worth removing the comment tags when coding for an ebook.

luthar28
03-03-2011, 09:43 AM
<style type="text/css" media="screen"><!--

< style stuff snipped>

--></style>

Because those marks mean ? (test at 6 :rolleyes: )

The stuff between is a COMMENT :smack:

You know it *will* be something like that...but sadly that's not the case. Hell, I've even tried linking to an external sheet but the same thing. I just can't figure it out. I remember this happened to me once before it was because there was an undeclared id tag (the whole document was wrapped in ID tag).

Jellby
03-03-2011, 10:01 AM
Have you tried removing media="screen"? And you are placing the whole <style> stuff inside the <head>, aren't you?

Proceed little by little. For instance, use this:

<style type="text/css">
body { color: red }
</style>

see if it works, and if it does, start adding things one by one, until you find the culprit.

DMSmillie
03-03-2011, 10:55 AM
Have you tried removing media="screen"?

Thanks Jellby.

/me starts to wonder if Jellby is the only one who can see her posts in this thread...!

luthar28
03-04-2011, 12:25 PM
Thanks Jellby.

/me starts to wonder if Jellby is the only one who can see her posts in this thread...!

I wasn't trying to be rude --just forgot to comment on it. Yes, that was the first thing I tried.

And as someone else suggested, I started removing every component, bit by bit and I was still getting the same result. I even started replacing it with components from successful conversions.

But I ended up making the ePub with Sigil, then doing a little manual correction of the TOC and the content.opf file and it's turned out great.

I really wish I knew what caused this for future reference...but no idea.