Spacing Under Headings

[Chris_Snow]

Greetings,

I'm reasonably new to ebooks, calibre, sigil and CSS.

But...I've managed to sort things out enough to tweak my ebooks like I want without too much of a problem....until now!

I've got a book that will NOT put a space under the heading. Everything I've done looks fine in the calibre reader, but on my Kobo GLo there is no space under heading. It's driving me nuts

I need some help please.

Here is my stylesheet

.MsoNormal {
    border-bottom: 0;
    border-top: 0;
    display: block;
    font-family: "Times New Roman";
    font-size: 1em;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    orphans: 0;
    padding-bottom: 0;
    padding-top: 0;
    text-align: justify;
    text-indent: 1.5em;
    widows: 0
    }
.calibre {
    display: block;
    font-size: 1em;
    margin-bottom: 0;
    margin-left: 5pt;
    margin-right: 5pt;
    margin-top: 0;
    orphans: 0;
    padding-left: 0;
    padding-right: 0;
    widows: 0
    }
.calibre2 {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.83em
    }
.calibre5 {
    font-style: italic
    }
.softbreak {
    border-bottom: 0;
    border-top: 0;
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    orphans: 0;
    padding-bottom: 0;
    padding-top: 0;
    page-break-before: avoid;
    text-align: center;
    widows: 0
    }
.whitespace {
    border-bottom: 0;
    border-top: 0;
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    orphans: 0;
    padding-bottom: 0;
    padding-top: 0;
    text-align: center;
    widows: 0
    }

Here is the code for the headings - different versions as I tired different things

  <h3 class="calibre2"><a class="calibre" style="text-align: center;">Blah</a></h3>

  <p class="MsoNormal"><br /></p>

  <h3 class="calibre2" style="text-align: center;">Blah<br /></h3>

  <p class="calibre2"><br /></p>

    <h3 class="calibre" style="text-align: center;"><br /></h3>

  <h3 class="calibre" style="text-align: center;">Blah Blah</h3>

  <h3 class="calibre2" style="text-align: center;">Blah<br /></h3>

  <div>
    <span style="font-size: 1em; text-indent: 1.5em;"><br /></span>
  </div>

I'm not sure why it won't work (user error ). I've tried changing the line height, margins, etc and still no go. All the posts I've found have been for removing the space!!

Thx for the assistance.

[theducks]

calibre is really the Body style in this book (note the margin values)

It definitely should NOT be used with a <a tag

calibre2 is the main style for that <h3 , Just change the bottom margin (2em) and forget the BR unless you are splitting a chapter head

[PeterT]

Couldn't you use a

h3+p  {
margin-top:5.0em;
}

to force a gap between an h3 and the following paragraph?

[Chris_Snow]

Thx very much...but I'm an English speaker - not sure what language you guys are speaking

On a more serious note: I tired the bottom margin change and changed the tag from calibre to calibre1 after a cut and paste. This seems to have done the trick and it looks like it should in my Kobo.

Why did it look right in the calibre ereader but NOT in the Kobo?

How do the heading icons in sigil relate to what's in the style sheet (that is, how to I know what style sheet listings are for H1, H2, H3, P etc??

[theducks]

Originally Posted by Chris_Snow

Thx very much...but I'm an English speaker - not sure what language you guys are speaking

HTML and CSS

On a more serious note: I tired the bottom margin change and changed the tag from calibre to calibre1 after a cut and paste. This seems to have done the trick and it looks like it should in my Kobo.

Why did it look right in the calibre ereader but NOT in the Kobo?

Not all devices support the entire range of EPUB (allowed) CSS statements or choose to override some (Mfgrs choice or User settings).
Sigil and some other browsers can also provide visual corrections to poor code (make it work on screen, anyway)

How do the heading icons in sigil relate to what's in the style sheet (that is, how to I know what style sheet listings are for H1, H2, H3, P etc??

Simple. They don't use the stylesheet at all (specifically). What they will do is flip the tags to the button used (works in BV or CV) and leave all else the same (not always what you want).

In CV, you can right click on the class= and select Goto Link or Style.

This is for a simple styling. if you have multiple class= within the paragraph, you will have to figure the cascade effect on your own.

If an existing style does not do what you want, AND, you still need that style for other places...
Make a Copy of its 'body' (the part including the {...}): and open a line in the stylesheet: type a new (dot)name and paste below, make changes as needed.

BTW PeterT's (valid) code is a special CSS form that says Use This WHENEVER a P tag follows a (closing) H3
This form has its advantages and pitfalls. YOU need to be fully aware of the structure of YOUR document or it will be applied where not wanted (someone used a H3 for some other purpose than a Chapter Heading) or missed in other places (the /H3 is followed by a <DIV for a quotation)
Know thy book

[Toxaris]

I strongly advice not to use the html export function of Word or the conversion of calibre. Both will make an unreadable mess with styles. That will make things a lot more complex.

[Chris_Snow]

Thx very much...but I'm an English speaker - not sure what language you guys are speaking

Originally Posted by theducks

HTML and CSS

That's from Europe isn't it??

Thx muchly for the help. While I still don't understand a lot of what you say, it points me in a direction that I can learn more. Half the time it is knowing the right question to ask - NOT what the answer is. You've given me lots of areas to explore and experiment with.

Thankfully, each one I tweak it get to understand a little more.

Thx again.

[Chris_Snow]

Originally Posted by Toxaris

I strongly advice not to use the html export function of Word or the conversion of calibre. Both will make an unreadable mess with styles. That will make things a lot more complex.

I don't use word much (only to remove formatting). As for calibre, I use it to convert from one format to another. I also use it to add the windows/orphans code and remove space between paragraphs - other than that - nada.

Now I'm getting more familiar with sigil, I'm going to try just putting the windows /orphans code directly in the stylesheet. Still haven't figured out how to remove the paragraph spacing through. Is it a margin setting? One of the biggest frustrations with sigil is that it doesn't always let you undo things!

[theducks]

Originally Posted by Chris_Snow

I don't use word much (only to remove formatting). As for calibre, I use it to convert from one format to another. I also use it to add the windows/orphans code and remove space between paragraphs - other than that - nada.

Now I'm getting more familiar with sigil, I'm going to try just putting the windows /orphans code directly in the stylesheet. Still haven't figured out how to remove the paragraph spacing through. Is it a margin setting? One of the biggest frustrations with sigil is that it doesn't always let you undo things!

CV almost always lets you undo (except when using S&R 'All')
Do frequent saves of each 'Good' bulk change, then if things go south, reload thre file; DISCARDING the current mess

IMHO Use BV to look and locate places that need work: set the insert cursor and switch to CV for work, switching to BV to see (1st glance) what it looks like. Remember, the target device is the final test of a look