View Full Version : <ol> format Question


Fabe
01-18-2012, 11:23 AM
<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
01-18-2012, 03:28 PM
Are you sure? I have not yet seen this behaviour.

Fabe
01-18-2012, 04:38 PM
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
01-19-2012, 09:36 AM
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
01-19-2012, 09:43 AM
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
01-19-2012, 10:18 AM
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
01-19-2012, 10:26 AM
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
01-19-2012, 10:28 AM
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
01-20-2012, 04:04 PM
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
01-20-2012, 08:40 PM
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
01-20-2012, 08:48 PM
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