<ol> format Question

[Fabe]

<ol> gives me generic sans-serif text. I want serif text. I tried a variety of coding strategies, but the <ol> text always looks generic. Can I have my way?

I did a search here and several people say the formatting with <ol> is lousy. Most say to hard code the list. I am okay with that provided I can hard code several hundred multi-line paragraphs in a resonable amount of time. Each paragraph will have a unique number. That's why I was looking at the <ol> tag in the first place.

Thanks for any advice. - Fabe

[Toxaris]

Are you sure? I have not yet seen this behaviour.

[Fabe]

Originally Posted by Toxaris

Are you sure? I have not yet seen this behaviour.

Oh, I'm sure. Or I'm delusional. I may be writing or implementing the CSS incorrectly. How would you do this?

[Fabe]

Here is my CSS coding:

p {
font-family : serif;
line-height: 1.5em;
font-size: 1em;
text-align: left
}

p.num {
list-style-type:numeric;
}

Here is the result:

Regular paragraph text, formatted correctly.

Text Text

Text Text

Text Text

Text Text

Regular paragraph text, formatted correctly.

Here is a representative sample of HTML coding in the document:

<p>Regular paragraph text, formatted correctly.</p>

<ol class="num">
<li>Text Text</li>

<li>Text Text</li>

<li>Text Text</li>

<li>Text Text</li>
</ol>

<p>Regular paragraph text, formatted correctly.</p>

[huebi]

Originally Posted by Fabe

Here is my CSS coding:

p {
font-family : serif;
line-height: 1.5em;
font-size: 1em;
text-align: left
}

p.num {
list-style-type:numeric;
}

Here is the result:

Regular paragraph text, formatted correctly.

Text Text

Text Text

Text Text

Text Text

Regular paragraph text, formatted correctly.

Here is a representative sample of HTML coding in the document:

<p>Regular paragraph text, formatted correctly.</p>

<ol class="num">
<li>Text Text</li>

<li>Text Text</li>

<li>Text Text</li>

<li>Text Text</li>
</ol>

<p>Regular paragraph text, formatted correctly.</p>

Well, you just defined the class num only for p-elements. So either deéte the p to have a class .num only effexcting every element or write a seperate class named ol.num.

[Fabe]

Huebi, thanks for your response. In the CSS file I changed p.num to:

ol.num {
list-style-type:numeric;
}

No difference in the end result. What am I doing wrong. Thanks. - Fabe

[DiapDealer]

You're changing the default font on normal paragraphs, but you're not changing it on the <ol> element. Either add the "font-family: serif" to the css for the <ol> element or drop it from both.

[Fabe]

SOLVED

In the CSS file I had to add the paragraph tags.

My CSS went from this:

ol.num {
list-style-type:numeric;
}

To this:

ol.num {
list-style-type:numeric;
font-family : serif;
line-height: 1.5em;
font-size: 1em;
text-align: left
}

Now it formats and looks fine. - Fabe

[Jellby]

If you want the default font for normal text to be serif, why not use body {font-family:serif} and just change it for headings if you want? That way you won't need to specif serif for p, ol, ul, div and whatnot.

[JSWolf]

Originally Posted by Jellby

If you want the default font for normal text to be serif, why not use body {font-family:serif} and just change it for headings if you want? That way you won't need to specif serif for p, ol, ul, div and whatnot.

That won't work on any Kobo eink readers. They ignore font-family commands when placed in the body style in the CSS.

[Fabe]

Originally Posted by Jellby

If you want the default font for normal text to be serif, why not use body {font-family:serif} and just change it for headings if you want? That way you won't need to specif serif for p, ol, ul, div and whatnot.

Can you give an example in code? Thanks. - Fabe