By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,763 Members | 1,569 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,763 IT Pros & Developers. It's quick & easy.

can't change font size - stupid question

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
16 Replies


P: n/a

"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
Jul 20 '05 #2

P: n/a
also, refer to this for declaring font properties...

http://www.w3.org/TR/REC-CSS1#font-properties
Jul 20 '05 #3

P: n/a
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.
Jul 20 '05 #4

P: n/a
"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/
Jul 20 '05 #5

P: n/a
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?
Jul 20 '05 #6

P: n/a

"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
Jul 20 '05 #7

P: n/a

"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..

Jul 20 '05 #8

P: n/a
> > 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
Jul 20 '05 #9

P: n/a
Also ... I forgot to say thanks. I appreciate the responses, and will
reciprocate, if possible, at some point.

--cd
Jul 20 '05 #10

P: n/a
>>>> 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
Jul 20 '05 #11

P: n/a
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.
Jul 20 '05 #12

P: n/a
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.

Jul 20 '05 #13

P: n/a
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/
Jul 20 '05 #14

P: n/a
"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.
Jul 20 '05 #15

P: n/a
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/
Jul 20 '05 #16

P: n/a
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.
Jul 20 '05 #17

This discussion thread is closed

Replies have been disabled for this discussion.