This one CSS instance is really stumping me!

This is really stumping me. I don't know how many time's I've done
this, but on this one particular case it is not working.

My CSS says this:

#footer{
color:#888;
font-size:20px;
}

h3{
font-family: Sylfaen, Georgia, "Times New Roman", Times, serif;
font-weight:normal;
letter-spacing: -1px;
margin:0;
}

This is the only reference to h3 in my CSS file.

It is used here:

<div id="footer">
<h3> (c) Copyright 2006</h3>
</div>

Unlike all other instances of using px for font-size units, in this one
case only, the resulting <h3> is of significantly different size when
viewed in Firefox vs. IE.

I cannot for the life of me figure out why this must be. I have plenty
of other CSS styles linked that do this exact sort of thing, using px
units, and they behave identically between the two browsers, because
afterall pixels are pixels, no matter what software you are using.

But this one doesn't!

Any ideas? I've studied these little snippets of code for hours and
can't understand.

Thanks
-j

On 19 Aug 2006 11:16:36 -0700, Jaxon Bridge wrote:

My CSS says this:

#footer{
color:#888;
font-size:20px;
}

h3{
font-family: Sylfaen, Georgia, "Times New Roman", Times, serif;
font-weight:normal;
letter-spacing: -1px;
margin:0;
}

This is the only reference to h3 in my CSS file.

It is used here:

div id="footer"
h3> (c) Copyright 2006</h3
/div

Unlike all other instances of using px for font-size units, in this one
case only, the resulting <h3> is of significantly different size when
viewed in Firefox vs. IE.

Define the size of <h3>, preferably in relative units (%, em).

Make life easier to the ones you're asking help from and post your link.

--
buy, bought, bye

On 2006-08-19, Jaxon Bridge wrote:

This is really stumping me. I don't know how many time's I've done
this, but on this one particular case it is not working.

My CSS says this:

#footer{
color:#888;
font-size:20px;
}

h3{
font-family: Sylfaen, Georgia, "Times New Roman", Times, serif;
font-weight:normal;
letter-spacing: -1px;
margin:0;
}

This is the only reference to h3 in my CSS file.

It is used here:

div id="footer"
h3> (c) Copyright 2006</h3
/div

It seems a little perverse to use a header in a footer! Why not
just style div#footer and leave out the <h3>?

Unlike all other instances of using px for font-size units, in this one
case only, the resulting <h3> is of significantly different size when
viewed in Firefox vs. IE.

There are many reasons not to use px size for fonts (and many other
things). Browsers handle their resizing differently, if at all.

I cannot for the life of me figure out why this must be. I have plenty
of other CSS styles linked that do this exact sort of thing, using px
units, and they behave identically between the two browsers, because
afterall pixels are pixels, no matter what software you are using.

But this one doesn't!

Any ideas? I've studied these little snippets of code for hours and
can't understand.

Use relative sizes for all your fonts. Set the basic size:

body { font-size: 1em; }

Then adjust all other sizes relative to that:

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }

Etc....

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

body { font-size: 1em; }

Then adjust all other sizes relative to that:

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }

Oh wow, I've been warned against this approach big time from all the
CSS reading I've been doing. It is my understanding that at some point
in the chain, you must have a parent that defines the fixed font size,
so everything that uses "em" can be adjusted to that. In your example,
there are no fixed font sizes on up the chain, so the em has no
original point of reference. This can cause sites to look very
different on different browsers, whereas using "px" or a sensible
combination of "px" and "em" will make it look identical on all
browsers.

I guess there are different schools of thought on this, but leaving
everything to an "em" is too unpredicatable. See this page:

http://www.bigbaer.com/css_tutorials/css_font_size.htm

-J

Jaxon Bridge wrote:

It is my understanding that at some point
in the chain, you must have a parent that defines the fixed font size,
so everything that uses "em" can be adjusted to that. In your example,
there are no fixed font sizes on up the chain, so the em has no
original point of reference. This can cause sites to look very
different on different browsers, whereas using "px" or a sensible
combination of "px" and "em" will make it look identical on all
browsers.

I guess there are different schools of thought on this, but leaving
everything to an "em" is too unpredicatable. See this page:

http://www.bigbaer.com/css_tutorials/css_font_size.htm

The hypotheses, different as to causation and outcome, are false. They
can be tested simply. In my view, for the common author (like me), it
is not a matter of logic or thought but of practical method.

As a case in point, in spite of the statements on the referenced page,
take a look at the authors style sheet (not that I am an apologist for
it, especially the font family set).

If you haven't already it may be worthwhile consulting,
http://www.w3.org/TR/REC-CSS2/fonts.html

Also consider that the client may have created a User Style Sheet,
http://www.w3.org/TR/CSS-access

In my experience, applying a font sizing rule to the body selector makes
for complexities in later styling child elements where the preference is
for absolute and relative font size values.


Louise

On 2006-08-19, Jaxon Bridge wrote:

body { font-size: 1em; }

Then adjust all other sizes relative to that:

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }


Oh wow, I've been warned against this approach big time from all the
CSS reading I've been doing. It is my understanding that at some point
in the chain, you must have a parent that defines the fixed font size,
so everything that uses "em" can be adjusted to that. In your example,
there are no fixed font sizes on up the chain, so the em has no
original point of reference. This can cause sites to look very
different on different browsers, whereas using "px" or a sensible
combination of "px" and "em" will make it look identical on all
browsers.

I guess there are different schools of thought on this, but leaving
everything to an "em" is too unpredicatable. See this page:

http://www.bigbaer.com/css_tutorials/css_font_size.htm

I wouldn't trust anyone whose page has a line like this:
<http://cfaj.freeshell.org/web/examples/bigbaer.jpg> to make
pronouncement on CSS.

And such and obviousy wrong statement as: "In conclusion, pixel
(.px) sized fonts offer reliable control and consistant scaling
across devices" doesn't add credibility. Px sizing offers nothing,
as different browsers treat it differently, and it makes no
allowances for the differently size pixels on different screens.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Chris F.A. Johnson <cfajohnson (AT) gmail (DOT) com> scripsit:

div id="footer"
h3> (c) Copyright 2006</h3
/div

It seems a little perverse to use a header in a footer!

Not necessarily. You may well have a footer that contains, say, copyright
information that starts with a header, like <h2>Copyright information</h2>.
(I would expect it to be 2nd level heading, not 3rd level - where would the
intermediate level be?) Naturally you should then use a few pieces of CSS to
make the appearance good and not the default <h2> rendering (removing or
reducing margins, setting the font size to something sensible like 1.2em or
even 1em, etc.).

What is perverse here is that the <h3> is not a heading for anything: there
is nothing after it inside the <div> element. It's also a rather pointless
statement since it does not specify the copyright holder; a sensible
statement would be "&copy; 2006 Jaxon Bridge".

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }

While that's generally a good, simple approach to font sizes for heading
(ignoring here the issue of actual size factors, which depends on the page
and its styling in general), you would need to use something a little more
elaborated _if_ you use headings e.g. in footers. Assuming you have a
copyright info footer, starting with a <h2> heading, you probably want that
<h2> to appear in a much smaller font than normal <h2> headings on the page,
so you'd use something like
..footer h2 { font-size: 1.2em; }

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On 19 Aug 2006 16:33:20 -0700, "Jaxon Bridge" <jaxon.bridge (AT) gmail (DOT) com>
wrote:

body { font-size: 1em; }

Then adjust all other sizes relative to that:

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }

Oh wow, I've been warned against this approach big time from all the
CSS reading I've been doing.

I wonder what you've been reading then. Whatever it is, I suggest you
consider deleting/recycling it.

It is my understanding that at some point
in the chain, you must have a parent that defines the fixed font size,
so everything that uses "em" can be adjusted to that.

Yes. The 'parent' as you put it, is the size that the user has defined
as being a text size which he/she finds pleasant to read on his/her
screen (which may or may not be the browser installation-default
setting).

In your example,
there are no fixed font sizes on up the chain,

Correct as far as the author-defined markup is concerned.

so the em has no
original point of reference. This can cause sites to look very
different on different browsers, whereas using "px" or a sensible
combination of "px" and "em" will make it look identical on all
browsers.

Wrong for two reasons:
1) It will not make it look identical in all browsers, as (a) good
browsers (i.e. almost everything except IE) provide the reader with the
means of overriding pixel settings; (b) there are many different
monitors and video cards in the world;
2) It is not desirable that it looks identical on all browsers, or even
for all users of a single browser. You have no idea what my eyesight is
like, and cannot know whether I like the text to be the same size as,
say, my son. (As it happens, I don't - but you still don't know which
text sizes we like).

I guess there are different schools of thought on this, but leaving
everything to an "em" is too unpredicatable.

There is only one school of thought among people who understand the web.
Unfortunately there are a good many people who have set themselves up as
web designers who either don't understand the web at all or haven't
upgraded their knowledge since about 1998.

And the em is well-defined and completely predictable. (Apart from an IE
bug which can be worked around by setting the body default size to
100%).

--
Stephen Poley

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