List Commands Change Fonts

Forum Moderators: not2easy

Message Too Old, No Replies

List Commands Change Fonts

How Can I Prevent This?

galileo5

1:38 am on Nov 6, 2006 (gmt 0)

Hello.

Whenever I try to implement list commands <ol> or <ul>, the font goes back to its browser default. It also affects fonts after the list command ends.

How do I prevent this without having to specify the font each time?

Thank you.

jtara

5:47 am on Nov 6, 2006 (gmt 0)

This shouldn't happen. What browser are you using? What HTML editing software are you using? Do you have a style sheet? Do you have a style sheet and don't know it? :)

galileo5

12:50 am on Nov 7, 2006 (gmt 0)

I use IE 6.0.
I don't use editing software. I enter the commands manually.
I do use CSS, though.

Am I supposed to specify fonts within the commands somehow, such as <ol font="arial">? The bullets themselves use the default font.

I know this is such a simple, basic question, and I do feel silly asking it.

I always validate my site, so I know it's structurally sound, so why is this happening?

Any help would be great.

jtara

1:08 am on Nov 7, 2006 (gmt 0)

View your website without using a style sheet. (Dunno how in IE. In Firefox, View, Page Style, No Style). Do you still have the font problem?

If not, your problem is in your style sheet. Look very carefully at your style sheet.

Test locally, comment-out parts of your style sheet until the problem goes away.

galileo5

2:57 am on Nov 7, 2006 (gmt 0)

My CSS validated just fine, too. I have all 10pt sizes and arial/sans-serif as family.

Here is my sheet:

A.NAVI:link {
background-color : #99ccff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : none;
}
A.NAVI:visited {
background-color : #99ccff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : none;
}
A.NAVI:hover {
background-color : #99ccff;
color : #ffffff;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : underline;
}
A.NAVI:active {
background-color : #99ccff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : none;
}
P.NAVI {
background-color : #99ccff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
}
A.TITLE:link {
background-color : #ffffff;
color : blue;
font-family : arial, sans-serif;
font-size : 10pt;
font-weight : bold;
text-decoration : none;
}
A.TITLE:visited {
background-color : #ffffff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
font-weight : bold;
text-decoration : none;
}
A.TITLE:hover {
background-color : #ffffff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
font-weight : bold;
text-decoration : underline;
}
A.TITLE:active {
background-color : #ffffff;
color : red;
font-family : arial, sans-serif;
font-size : 10pt;
font-weight : bold;
text-decoration : none;
}
A.ARTICLE:link {
background-color : #ffffff;
color : red;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : underline;
}
A.ARTICLE:visited {
background-color : #ffffff;
color : blue;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : underline;
}
A.ARTICLE:hover {
background-color : #ffffff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : none;
}
A.ARTICLE:active {
background-color : #ffffff;
color : red;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : none;
}
P.DESCR:first-line {
background-color : #ffffff;
color : black;
font-family : arial, sans-serif;
font-size : 12pt;
font-weight : bold;
}
P.DESCR {
background-color : #ffffff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
}
P.DATE {
background-color : #ffffff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
font-style : italic;
}
P.ARTICLE {
background-color : #ffffff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
}
P.TVALERT {
background-color : yellow;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
font-weight : bold;
text-align : center;
}

jtara

3:40 am on Nov 7, 2006 (gmt 0)

Validation doesn't mean it will do what you want it to do. It just means it has valid syntax.

You don't have a selector for lists or list elements. Nor do you have a selector for BODY. You haven't specified either a default font for the document nor for lists or list elements. So, your lists are going to take the browser default font.

Lists don't embed in paragraphs. I think that the the fatal misconception. Lists start a new top-level block. Lists are peers with paragraphs, block-wise. (Lists, like anything else, embed in divisions, though.)

You've exhaustively given a font for each selector. This is unnecessary and adds bloat to your style sheet. You listed the same fonts almost 20 times.

Why not give a default font to your entire document, using a BODY selector? Then, specify fonts for anything that is DIFFERENT from the document default. Ditto for colors. Give a default color for BODY. Then give colors for anything that is different.

(Right now, there ARE no different fonts, so just specify the fonts for BODY and be done with it...)

Did you validate your HTML as well? If you are using tags with no then it would validate. (Assuming an appropriate DTD for that style.) But again, validation doesn't mean it will read your mind and do what you want it to do. The appearence of an <ol>, <ul>, etc. tag ends any previous block. That was a paragraph, this is a list. Mutually-exclusive.

If you are using text and have tried to embed lists inside paragraphs, it should have failed HTML validation.

galileo5

2:21 am on Nov 9, 2006 (gmt 0)

I appreciate your help so far, but am experiencing the same problem.

Here is the new body command I've implemented. What's strange is that the font style and color affect the whole document, but when it comes to size, the <ol> or <ul> commands still use the default size -- completely ignoring the size command.

BODY,P
{background-color: #FFFFFF;
color: black;
font-family: arial, sans-serif;
font-size: 10pt;
text-decoration: none}

What am I doing wrong?

Thanks again.

abbeyvet

2:43 am on Nov 9, 2006 (gmt 0)

There must be another style sheet lurking somewhere - is there an embedded one or anything? I tried your css and there is no problem.

Have you looked at the HTML to make sure there is no additional styles in there?

As an aside that's a very wordy CSS - as jtara points out you are repeating stuff unnecessarily for multiple selectors. Basicaly, once you have stated that 'a' is to have a given style, you only need to mention it again if there is some variation from that basic style.

You have defined font size and family for 'body', so you don't need to repeat that.

This:

A.TITLE:link {
background-color : #ffffff;
color : blue;
font-family : arial, sans-serif;
font-size : 10pt;
font-weight : bold;
text-decoration : none;
}
A.TITLE:visited {
background-color : #ffffff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
font-weight : bold;
text-decoration : none;
}
A.TITLE:hover {
background-color : #ffffff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
font-weight : bold;
text-decoration : underline;
}
A.TITLE:active {
background-color : #ffffff;
color : red;
font-family : arial, sans-serif;
font-size : 10pt;
font-weight : bold;
text-decoration : none;
}

A.ARTICLE:link {
background-color : #ffffff;
color : red;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : underline;
}
A.ARTICLE:visited {
background-color : #ffffff;
color : blue;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : underline;
}
A.ARTICLE:hover {
background-color : #ffffff;
color : black;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : none;
}
A.ARTICLE:active {
background-color : #ffffff;
color : red;
font-family : arial, sans-serif;
font-size : 10pt;
text-decoration : none;
}

could easily be reduced to this (or less):

a {text-decoration:none;}
a:hover {text-decoration:underline;}
A.NAVI {
background-color : #99ccff;
color : black;
}
A.TITLE:link {
color : blue;
}
A.TITLE:visited {
color : black;
}
A.TITLE:hover {
color : black;
}
A.TITLE:active {
color : red;
}
A.ARTICLE:link {
color : red;
text-decoration : underline;
}
A.ARTICLE:visited {
color : blue;
text-decoration : underline;
}
A.ARTICLE:hover {
color : black;
text-decoration : none;
}

galileo5

4:44 pm on Nov 12, 2006 (gmt 0)

Well, I added the <ol> and <ul> commands to the sheet like this:

BODY,P,OL,UL
{background-color: #FFFFFF;
color: black;
font-family: arial, sans-serif;
font-size: 10pt;
text-decoration: none}

and it works, until the list command ends. After it ends, it changes back to the browser default size, and I think I know why: I use forms to input my data, and one of the commands I have in the insert_db file for my form is the following:

$myarticle = str_replace(Chr(13),' ', $article);

Since that break command is in place of the command, I would presume that is why the text beneath the list command is not obeying the size command. Am I right?

If so, how can I work around it so that this won't happen? I would like to leave the command as it is.

If not, what else could it be?

swa66

7:40 pm on Nov 12, 2006 (gmt 0)

What doctype are you using and does your html validate?

a tag doesn't end a or a <li>, but if you e.g. use a xhtml doctype that is a tag that's not closed, and would create trouble further down, it's all a matter of context.

galileo5

9:42 pm on Nov 12, 2006 (gmt 0)

I'm using 4.01 Transitional. I always make sure my HTML validates. I don't use XHTML.

If I use after the list command, the font size adheres to the command in the body sheet; but my form uses (instead of one ), which changes the size of the font to the browser default.

Maybe an illustration would help. Part of my page looks something like this:

Any advice?

encyclo

9:53 pm on Nov 12, 2006 (gmt 0)

The problem you have with the above example is that the

<ol>

closes the preceeding paragraph. This is because the closing

</p>

is optional in HTML and a paragraph cannot contain a list.

So this means that the text following your

</ol>

is not within the paragraph or any other block-level element other than the table cell itself. This means that styles applied just to the pagagraph won't affect this text.

You need to re-open a new paragraph for text after the list.

galileo5

11:19 pm on Nov 12, 2006 (gmt 0)

But wouldn't font specification in the body sheet override that rule? The font face and font color change fine, but why wouldn't the size change?

This isn't making sense to me.

tangor

6:00 am on Nov 17, 2006 (gmt 0)

In your example you have opened a paragraph, but have not CLOSED IT.

Is there any need for the p tag in the TD in the first place?