View Full Version : Odd discovery fixed all my centering issues


jttraverse
02-12-2012, 12:56 AM
I placed this in the Sigil forum since I use that program as well, but perhaps someone here may find this helpful if you're having problems with centering or other issues with styling in the CSS stylesheet:

I'm posting this because I had never found a solution to my problems with centering and other non-working style issues--until today! I set out to find a hack solution to get a line of text to center because, no matter what I'd tried, it would not be centered on my Nook (I thought it was the Nook reader app and how it handled CSS..which in a way it is!) In testing with Sigil, I stumbled, quite by accident, across what had been my whole problem, so I'm hoping this might also solve some problems others may be having. The point is that everything looked perfect in Calibre, Sigil, in a browser, all programs that ran on my pc--but on my color Nook it all went left aligned.

The problem, after a lot of testing, turned out to be one messed up line in the stylesheet. To clarify, I do not build stylesheets by hand, and rarely thought to look at it closely; I use Dreamweaver for editing the xhtml and let DW generate the CSS stylesheet file. I guess it's perfect 99.99% of the time...but..
In one tag in one line of the CSS file there was a glitch where the ending em; (that's the size measurement and closing quote) was on a different line beneath where it should have been. I'll insert images below. I proved this was the problem by testing with just the two entries. When I fixed the error by moving the ending em;...problem solved. Actually, fixing a couple of other similar glitches resolved a whole host of other issues too, which suggests to me that wherever a problem like this occurs, it kills all subsequent tags. After manually going through the template.css file and cleaning up this kind of glitch...my book looks wonderful now. The standard span entry, or just a text:center will line things up fine. So, if you're having weird problems, do scroll through your stylesheet and check for misaligned or disconnected spots. Anyway, see the images below for before and after results, and a picture showing the problem CSS tag (at the top of the picture.)

Fwiw, this now displays perfectly on my color Nook using the built-in reader app. I've also tested it using the android fbReader app, which is a nice app but apparently doesn't use the stylesheet. Nevertheless, since you can now double-tap to zoom in on images with the latest Nook update, things are working well all the way around.
-JT
http://www.fullofstars.com/temp/stylesheet-glitch.png
http://www.fullofstars.com/temp/A-left.png http://www.fullofstars.com/temp/A-centered.png

http://www.fullofstars.com/temp/B-left.png http://www.fullofstars.com/temp/B-centered.png

Toxaris
02-12-2012, 04:44 AM
It is always good to validate your CSS files. Some readers, notably the ones using ADE, will totally ignore the stylesheet when there is an error in it.