can't change font size - stupid question

[Coder Droid]

I'm trying my first table-less site, and I've bumped my head up against
a wall. I can't change the font size within a div.

Real quick, my style sheet has:

-------------------------------------
body { font: 8pt "face" }
#nav {float: left; width: 144px; }
#test { font: 12pt; font-weight: bold }
-------------------------------------

HTML has:

-------------------------------------
<div id="nav">
text <br>
<div id="test">bigger text</div>
</div>
-------------------------------------

I can change the font weight, color, and other attributes. Everything
except for the size. No matter what I try, I just can't override the
point size set in body.

This seems so elementary, it's driving me nuts! Help!

--cd

[Jim Roberts]

"Coder Droid" wrote ...

I'm trying my first table-less site, and I've bumped my head up against
a wall. I can't change the font size within a div.

Real quick, my style sheet has:

-------------------------------------
body { font: 8pt "face" }
#nav {float: left; width: 144px; }
#test { font: 12pt; font-weight: bold }
-------------------------------------

Try changing 'font: 12pt' to 'font-size: 12pt'

Jim Roberts

[Jim Roberts]

also, refer to this for declaring font properties...

http://www.w3.org/TR/REC-CSS1#font-properties

[Beauregard T. Shagnasty]

Quoth the raven named Coder Droid:

I'm trying my first table-less site, and I've bumped my head up
against a wall. I can't change the font size within a div.

Real quick, my style sheet has: body { font: 8pt "face" }
Error: remove the quotes and word "face"

Further. pt (points) is for printing. Use % instead so the visitor
gets to see his/her own default size. Don't use px either, as IE users
won't be able to change size if they have less than perfect vision.

body {
font-size: 100%;
font-family: sans-serif;
}
#nav {float: left; width: 144px; }
Use instead:

#nav (float: left; width: 14em; }
...or whatever width in em is appropriate. Using em for sizes of divs
assures that the design doesn't fall apart when visitor resizes text.
#test { font: 12pt; font-weight: bold }
Again, set font as above, using a percentage. If you really want your
nav font to be larger than the body, use font-size: 110%
I can change the font weight, color, and other attributes.
Everything except for the size. No matter what I try, I just can't
override the point size set in body.

This seems so elementary, it's driving me nuts! Help!

Once you learn the basics, the rest is easy. :-)

--
-bts
-This space intentionally left blank.

[Jukka K. Korpela]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote:

body { font: 8pt "face" }

Error: remove the quotes and word "face"

That would make the style sheet syntactically incorrect. The one quoted
above is syntactically correct, though it has many problems, as discussed
in this thread. I don't think there is a font named "face", but there
could be, and the declaration font: 8pt "face" _is_ syntactically
correct.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Neal]

On Sat, 3 Apr 2004 19:32:09 +0000 (UTC), Jukka K. Korpela
<jk******@cs.tut.fi> wrote:

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote:

body { font: 8pt "face" }

Error: remove the quotes and word "face"

That would make the style sheet syntactically incorrect.

{font: 8pt} is syntactically incorrect?

I agree that {font-size: 8pt} is correct, but using font: with only one of
the 5 possible value types specified isn't incorrect in this situation to
my knowledge.

Or is my knowledge at fault?

[Jim Roberts]

"Neal" wrote:

{font: 8pt} is syntactically incorrect?

I agree that {font-size: 8pt} is correct, but using font: with only one of
the 5 possible value types specified isn't incorrect in this situation to
my knowledge.

Or is my knowledge at fault?

{font: 8pt} is not valid. The original example was given:

#test { font: 12pt; font-weight: bold }. This is invalid and will not work.

This should read {font-size: 12pt; ...}, aside from the problem of using pt
size.

Jim Roberts

[Jim Roberts]

"Jim Roberts" wrote...

{font: 8pt} is not valid. The original example was given:

#test { font: 12pt; font-weight: bold }. This is invalid and will not work.
This should read {font-size: 12pt; ...}, aside from the problem of using pt size.

Jim Roberts

Actually, as far as this being valid, I'm not really sure. I tested it with
IE6 and Firefox .8, and it did not work in either..

[Coder Droid]

> > body { font: 8pt "face" }

Error: remove the quotes and word "face"

Further. pt (points) is for printing. Use % instead so the visitor
gets to see his/her own default size. Don't use px either, as IE users
won't be able to change size if they have less than perfect vision.

font-size: worked ... I think the spots where "font:" worked (like in
body) are probably just sheer luck. Or rendering engines being nice.

followup question: you mention to use % ... what's that a percentage of?
IOW, what's a 100% font size? would 100% be the user's "normal" font
size?

--cd

[Coder Droid]

Also ... I forgot to say thanks. I appreciate the responses, and will
reciprocate, if possible, at some point.

--cd

[Coder Droid]

>>>> body { font: 8pt "face" }

Error: remove the quotes and word "face"

That would make the style sheet syntactically incorrect.

{font: 8pt} is syntactically incorrect?

See, I've done this (read: copied-n-pasted) this type of syntax for
years:

body {
margin: 0px;
font: 8pt "verdana", "arial", "helv"; color: #000077;
}

As I'm fond of saying, "Just because it works doesn't mean it's right."
I'm just going to have to study the specs more.

--cd

[Beauregard T. Shagnasty]

Quoth the raven named Coder Droid:

followup question: you mention to use % ... what's that a
percentage of? IOW, what's a 100% font size? would 100% be the
user's "normal" font size?

Yes, 100% is the representation of the user's currently set default
font size. Whatever it is. The user likes it.

body {
font-size: 100%;
-or-
font-size: 1em;
}

But IE has a problem when using em, so it's best to use the percentage.

You should also set other font sizes the same way. Such as:

..footer { font-size: 85%; }
h1 { font-size: 150%; }
h2 { font-size: 140%; } ..and so on.

Normally, you don't want to go below 100% for anything but legalese. <g>

--
-bts
-This space intentionally left blank.

[Neal]

On Sat, 3 Apr 2004 15:32:42 -0500, Jim Roberts <jr******@msn.com> wrote:

"Neal" wrote:

{font: 8pt} is syntactically incorrect?

I agree that {font-size: 8pt} is correct, but using font: with only one
of
the 5 possible value types specified isn't incorrect in this situation
to
my knowledge.

Or is my knowledge at fault?

{font: 8pt} is not valid. The original example was given:

#test { font: 12pt; font-weight: bold }. This is invalid and will not
work.

This should read {font-size: 12pt; ...}, aside from the problem of using
pt
size.

Jim Roberts

It's my understanding that using the font: property resets all 5 of the
value types (face, size, style, weight and variant) to whatever the
browser has as default, and then changes them as you have instructed in
the declaration. I miss things on occassion, but in this case I'm pretty
sure that there's no problem using both font: and the more specific font
properties in the same declaration. Of course, if you set something like

p {font-style: italic; font: bold }

the text should be bold and not italic, as the font: resets the style to
normal.

[Stephen Poley]

On Sat, 03 Apr 2004 15:10:12 -0500, Neal <ne*****@spamrcn.com> wrote:

On Sat, 3 Apr 2004 19:32:09 +0000 (UTC), Jukka K. Korpela
<jk******@cs.tut.fi> wrote:

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote:

body { font: 8pt "face" }

Error: remove the quotes and word "face"

That would make the style sheet syntactically incorrect.

{font: 8pt} is syntactically incorrect?

I agree that {font-size: 8pt} is correct, but using font: with only one of
the 5 possible value types specified isn't incorrect in this situation to
my knowledge.

Or is my knowledge at fault?

It's not the easiest bit of the spec to read:

"Value: [ [ <'font-style'> || <'font-variant'> ||
<'font-weight'> ]? <'font-size'> [ / <'line-height'> ]?
<'font-family'> ] | caption | icon | menu | message-box
| small-caption | status-bar | inherit"

but if you examine it carefully you'll see that font-size and
font-family are both required (unless you use one of the system fonts
instead).

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Karl Smith]

"Coder Droid" wrote:

I can't change the font size within a div.

body { font: 8pt "face" }
That is (syntacticly) ok.
#test { font: 12pt; font-weight: bold }

The "font:" shorthand property requires the typeface ("font-family")
to be specified. If you're just changing the size, use "font-size" or
restate the face as well as the new size.

To your question in a follow-up post, font-size in percentages: the
percentage is multiplied by the computed font-size inherited from the
parent element.

<parent style="font-size: 20px">
<child style="font-size: 150%">
This text is probably 30px high.
</child>
</parent>

--
Karl Smith.

[Jukka K. Korpela]

Neal <ne*****@spamrcn.com> wrote:

It's my understanding that using the font: property resets all 5 of
the value types (face, size, style, weight and variant) to whatever
the browser has as default, and then changes them as you have
instructed in the declaration.
No, if you describe it that way, you need to say that it sets the five
properties to their _initial values_ as defined in CSS specifications.
The initial values are
font-family: ? (browser-dependent, depends on settings too)
font-size: medium (the meaning is browser-dependent, etc.)
font-style: normal
font-weight: normal
font-variant: normal

So if a browser uses by default (due to factory settings or user
settings) bold face for everything, then font: 100% Arial sets font
weight to normal to whatever it applies to, not to the browser default.

This difference is mostly theoretical only in this context, since it is
very rare to have a browser with e.g. global font weight set to bold.
I miss things on occassion, but in
this case I'm pretty sure that there's no problem using both font:
and the more specific font properties in the same declaration.
It depends on the order.
Of
course, if you set something like

p {font-style: italic; font: bold }

the text should be bold and not italic, as the font: resets the style
to normal.

Nope, the declaration font: bold is syntactically malformed and hence
shall be ignored by conforming browsers. The font shorthand must always
include font size and font family, in that order, and may include other
subproperties.

It would be best, for almost all purposes, to forget that we ever heard
of the font shorthand. It adds nothing to the expressive power of CSS
(as distinct from font: xxx where xxx is a keyword indicating a "system
font", which is really a different story), it does not make things
essentially shorter, and it surely confuses people.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Neal]

On Sun, 4 Apr 2004 10:04:49 +0000 (UTC), Jukka K. Korpela
<jk******@cs.tut.fi> wrote:

Nope, the declaration font: bold is syntactically malformed and hence
shall be ignored by conforming browsers. The font shorthand must always
include font size and font family, in that order, and may include other
subproperties.

I was trying to post that I got that some hours ago, but my 'puter decided
to crap out on me. I see that now.