Problem with new HTML / CSS sheet

[Steven (remove wax and invalid for reply)]

I'm moving an old page to a new host, and trying to modernize it at the
same time. There are two little problems that are driving me nuts.

1. Validation of www.marzolian.com/index.html says:

Line 33, column 5: element "NOTE" undefined
<note>Last revised: May 29, 2005</note>
"You have used the element named above in your document, but the
document type you are using does not define an element of that name."

The error is with "note" What did I do wrong?

2. The last line is supposed to have the "note" style, defined in the
style sheet (marzolian.css). What's odd, that definition includes a
font size. If I change this size in the style sheet, it is reflected
onscreen; in other words, despite the error, Firefox at least is reading
the font size. However, the center part of this definition is not
getting applied.

I suspect that the two problems have the same fix. What is it?

3. This isn't a problem, but a preference: Rather than fix the font
size for "note" I would rather just make it <small>. How can I do that
in a CSS file?

Thanks.
--
Steven M

HOUSTON - First in Oil, First in Space,
Last in the National League Central Division

[Els]

Steven (remove wax and invalid for reply) wrote:

1. Validation of www.marzolian.com/index.html says:

Line 33, column 5: element "NOTE" undefined
<note>Last revised: May 29, 2005</note>
"You have used the element named above in your document, but the
document type you are using does not define an element of that name."

The error is with "note" What did I do wrong?
You used it. There is no element 'note' in HTML.
in other words, despite the error, Firefox at least is reading
the font size. However, the center part of this definition is not
getting applied.

I suspect that the two problems have the same fix. What is it?
"note" isn't a valid HTML element, but Firefox applies styles to
anything, valid or not.
Maybe Firefox takes the unknown element as inline by default, which
means margins are not applied.
3. This isn't a problem, but a preference: Rather than fix the font
size for "note" I would rather just make it <small>. How can I do that
in a CSS file?

Use font-size:small; ?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Adrienne]

Gazing into my crystal ball I observed "Steven (remove wax and invalid for
reply)" <un****@hal-pc.orgwax.invalid> writing in news:42995fd9$0$64582
$a*******@news.hal-pc.org:

I'm moving an old page to a new host, and trying to modernize it at the
same time. There are two little problems that are driving me nuts.

1. Validation of www.marzolian.com/index.html says:

Line 33, column 5: element "NOTE" undefined
<note>Last revised: May 29, 2005</note>
"You have used the element named above in your document, but the
document type you are using does not define an element of that name."

The error is with "note" What did I do wrong?
There is no element named "note". Period. You cannot just make up
elements to your liking.

2. The last line is supposed to have the "note" style, defined in the
style sheet (marzolian.css). What's odd, that definition includes a
font size. If I change this size in the style sheet, it is reflected
onscreen; in other words, despite the error, Firefox at least is reading
the font size. However, the center part of this definition is not
getting applied.

I suspect that the two problems have the same fix. What is it?
You are applying centering to an element that does not exist. Block
elements can have their contents centered. Inline elements, since they are
not block, cannot. The browser does not know whether the "note" element is
block or inline, so it does not center it at all.

3. This isn't a problem, but a preference: Rather than fix the font
size for "note" I would rather just make it <small>. How can I do that
in a CSS file?
Use a percentage, like 80%, which will make the font size 80% of the users
chosen font size. The font size you are using now is way too small.

Thanks.

What you really want is:
<div class="note">Last revised May 29, 2005</div>

And in your CSS:
..note {font-size:80%; text-align:center;}
--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

[Els]

Steven (remove wax and invalid for reply) wrote:

1. Validation of www.marzolian.com/index.html says:

Line 33, column 5: element "NOTE" undefined
<note>Last revised: May 29, 2005</note>
"You have used the element named above in your document, but the
document type you are using does not define an element of that name."

The error is with "note" What did I do wrong?
You used it. There is no element 'note' in HTML.
in other words, despite the error, Firefox at least is reading
the font size. However, the center part of this definition is not
getting applied.

I suspect that the two problems have the same fix. What is it?
"note" isn't a valid HTML element, but Firefox applies styles to
anything, valid or not.
Maybe Firefox takes the unknown element as inline by default, which
means margins are not applied.
3. This isn't a problem, but a preference: Rather than fix the font
size for "note" I would rather just make it <small>. How can I do that
in a CSS file?

Use font-size:small; ?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Adrienne]

Gazing into my crystal ball I observed "Steven (remove wax and invalid for
reply)" <un****@hal-pc.orgwax.invalid> writing in news:42995fd9$0$64582
$a*******@news.hal-pc.org:

I'm moving an old page to a new host, and trying to modernize it at the
same time. There are two little problems that are driving me nuts.

1. Validation of www.marzolian.com/index.html says:

Line 33, column 5: element "NOTE" undefined
<note>Last revised: May 29, 2005</note>
"You have used the element named above in your document, but the
document type you are using does not define an element of that name."

The error is with "note" What did I do wrong?
There is no element named "note". Period. You cannot just make up
elements to your liking.

2. The last line is supposed to have the "note" style, defined in the
style sheet (marzolian.css). What's odd, that definition includes a
font size. If I change this size in the style sheet, it is reflected
onscreen; in other words, despite the error, Firefox at least is reading
the font size. However, the center part of this definition is not
getting applied.

I suspect that the two problems have the same fix. What is it?
You are applying centering to an element that does not exist. Block
elements can have their contents centered. Inline elements, since they are
not block, cannot. The browser does not know whether the "note" element is
block or inline, so it does not center it at all.

3. This isn't a problem, but a preference: Rather than fix the font
size for "note" I would rather just make it <small>. How can I do that
in a CSS file?
Use a percentage, like 80%, which will make the font size 80% of the users
chosen font size. The font size you are using now is way too small.

Thanks.

What you really want is:
<div class="note">Last revised May 29, 2005</div>

And in your CSS:
..note {font-size:80%; text-align:center;}
--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

[Steven (remove wax and invalid for reply)]

Adrienne wrote:

Gazing into my crystal ball I observed "Steven (remove wax and invalid for
reply)" <un****@hal-pc.orgwax.invalid> writing in news:42995fd9$0$64582
$a*******@news.hal-pc.org:

I'm moving an old page to a new host, and trying to modernize it at the
same time. There are two little problems that are driving me nuts.

1. Validation of www.marzolian.com/index.html says:

Line 33, column 5: element "NOTE" undefined
<note>Last revised: May 29, 2005</note>
"You have used the element named above in your document, but the
document type you are using does not define an element of that name."

The error is with "note" What did I do wrong?

There is no element named "note". Period. You cannot just make up
elements to your liking.

2. The last line is supposed to have the "note" style, defined in the
style sheet (marzolian.css). What's odd, that definition includes a
font size. If I change this size in the style sheet, it is reflected
onscreen; in other words, despite the error, Firefox at least is reading
the font size. However, the center part of this definition is not
getting applied.

I suspect that the two problems have the same fix. What is it?

You are applying centering to an element that does not exist. Block
elements can have their contents centered. Inline elements, since they are
not block, cannot. The browser does not know whether the "note" element is
block or inline, so it does not center it at all.

3. This isn't a problem, but a preference: Rather than fix the font
size for "note" I would rather just make it <small>. How can I do that
in a CSS file?

Use a percentage, like 80%, which will make the font size 80% of the users
chosen font size. The font size you are using now is way too small.

Thanks.

What you really want is:
<div class="note">Last revised May 29, 2005</div>

And in your CSS:
.note {font-size:80%; text-align:center;}

Thanks very much, all fixed now.

What threw me, I think, is that "style" means something different in
programs such as Microsoft Word. There I can create entirely new styles
such as "Note" or "myHeading1" and apply them throughout a document, or
export them to new documents. A Word style can be based on, or inherit,
attributes from existing styles. The system has advantages that are
similar to those of using CSS.

The problem was, the online reference material on CSS and styles that I
have been reading doesn't make it clear that you can't make up your own
styles that way.

Thanks again. I have been learning a lot from this group for the past
few weeks.

--
Steven

HOUSTON - First in Oil, First in Space,
Last in the National League Central Division

[Steven (remove wax and invalid for reply)]

Adrienne wrote:

Gazing into my crystal ball I observed "Steven (remove wax and invalid for
reply)" <un****@hal-pc.orgwax.invalid> writing in news:42995fd9$0$64582
$a*******@news.hal-pc.org:

I'm moving an old page to a new host, and trying to modernize it at the
same time. There are two little problems that are driving me nuts.

1. Validation of www.marzolian.com/index.html says:

Line 33, column 5: element "NOTE" undefined
<note>Last revised: May 29, 2005</note>
"You have used the element named above in your document, but the
document type you are using does not define an element of that name."

The error is with "note" What did I do wrong?

There is no element named "note". Period. You cannot just make up
elements to your liking.

2. The last line is supposed to have the "note" style, defined in the
style sheet (marzolian.css). What's odd, that definition includes a
font size. If I change this size in the style sheet, it is reflected
onscreen; in other words, despite the error, Firefox at least is reading
the font size. However, the center part of this definition is not
getting applied.

I suspect that the two problems have the same fix. What is it?

You are applying centering to an element that does not exist. Block
elements can have their contents centered. Inline elements, since they are
not block, cannot. The browser does not know whether the "note" element is
block or inline, so it does not center it at all.

3. This isn't a problem, but a preference: Rather than fix the font
size for "note" I would rather just make it <small>. How can I do that
in a CSS file?

Use a percentage, like 80%, which will make the font size 80% of the users
chosen font size. The font size you are using now is way too small.

Thanks.

What you really want is:
<div class="note">Last revised May 29, 2005</div>

And in your CSS:
.note {font-size:80%; text-align:center;}

Thanks very much, all fixed now.

What threw me, I think, is that "style" means something different in
programs such as Microsoft Word. There I can create entirely new styles
such as "Note" or "myHeading1" and apply them throughout a document, or
export them to new documents. A Word style can be based on, or inherit,
attributes from existing styles. The system has advantages that are
similar to those of using CSS.

The problem was, the online reference material on CSS and styles that I
have been reading doesn't make it clear that you can't make up your own
styles that way.

Thanks again. I have been learning a lot from this group for the past
few weeks.

--
Steven

HOUSTON - First in Oil, First in Space,
Last in the National League Central Division

[Jukka K. Korpela]

Steven (remove wax and invalid for reply) wrote:

What threw me, I think, is that "style" means something different in
programs such as Microsoft Word.
Indeed. MS Word "styles" and CSS "styles" are conceptually related, but
defined independently of each other. The good news is that if you know
MS Word styles and use them, you are much better prepared to learning
good Web authoring habits than people who do word processing in a naive
way, just setting fonts and margins etc. for each piece of text
separately (corresponding, somewhat, to bad old <font> tags in HTML).
There I can create entirely new styles
such as "Note" or "myHeading1" and apply them throughout a document, or
export them to new documents.
Yes. If you use a Save as HTML (or Save as Web page or whatever they
call it this week) in MS Word, you'll see (if you can make your way
through the crap) that MS Word generates a <div class="Note">...</div>
element from a paragraph that you have defined to take the Note style
you have defined and inserts some messy CSS that corresponds to your
settings for that MS Word style.
A Word style can be based on, or inherit,
attributes from existing styles.
The CSS styles are different. There is no inheritance in _that_ sense.
But you can assign several styles to an element, e.g.
<div class="note warning">...</div>
and that way combine the settings you have made for the styles.
The problem was, the online reference material on CSS and styles that I
have been reading doesn't make it clear that you can't make up your own
styles that way.

The way that corresponds to making up new MS Word styles is to select a
name for a class (the choice is up to you, but it pays off to use names
that reflect meaning rather than appearance, e.g. "warning" rather than
"red"), start using it in markup (in class="..." attributes), and write
CSS rules for the class. You can start using a class and think about the
appearance later, and you can even write different stylistic definitions
for a class (e.g., one set for screen media, another for print media).

The class="..." attribute is often attached to a <div> element (for a
block) or a <span> element (for inline content), and often the element
is introduced into the markup just in order to have something to attach
the attribute to. But you can use them for (basically) any element, such
as <p> or <ul> or <strong>.

Well, in a sense this means that you _can_ base a style on an existing
style. Namely in the sense that elements like <p> or <ul> or <strong>
have default stylistic features (logically, there are browser default
style sheets that assign properties to them). Thus, if you use <p
class="note">, then all the default rendering features of <p> elements
apply, unless you override them in your style sheet.

P.S. The markup <div class="note">Last revised May 29, 2005</div> that
was suggested is certainly correct. Some of us might say that
<div class="note"><small>Last revised May 29, 2005</small></div>
can be justifiable, too. Then you need to watch out so that you won't
cause two cumulative size reductions to be applied. You could use
..note {text-align:center;}
..note small {font-size:80%;}

Yucca