On the front page of my website www.jamesboswell.info, I have a couple
of lists in the right column. The lower one contains 10 names and
corresponding links. All names are formatted using the same font,
size, etc. through a <span class="style10">.

Problem is - when the names are shown, be that in IE or Firefox, they
have different sizes. Some names seems to conform to the
specifications, some seems to conform to the general text size of the
page, despite ALL of them being defined in exactly the same way.

I have tried specifying the font and size manually as well, overriding
the style sheet, to no avail. Also tried defining the entire list with
a <div class="style10"></div>, but the result is the same.

Strangely the top list in the column has had the exact same problem,
but isn't showing it at the moment. It is defined in exactly the same
way as the bottom list...

The class is defined as follows in the style sheet:

..style10 {font-family: Georgia, Verdana, "Times New Roman", Times,
serif; font-size: 10px; }

Any ideas?

-Thomas

<thomas.frandzen@gmail.com> wrote in message
news:105840c7-f5b1-4ac7-ada9-8b76a389d618@47g2000hsb.googlegroups.com...
>
> On the front page of my website www.jamesboswell.info, I have a couple
> of lists in the right column. The lower one contains 10 names and
> corresponding links. All names are formatted using the same font,
> size, etc. through a <span class="style10">.
>
> Problem is - when the names are shown, be that in IE or Firefox, they
> have different sizes. Some names seems to conform to the
> specifications, some seems to conform to the general text size of the
> page, despite ALL of them being defined in exactly the same way.
>
> I have tried specifying the font and size manually as well, overriding
> the style sheet, to no avail. Also tried defining the entire list with
> a <div class="style10"></div>, but the result is the same.
>
> Strangely the top list in the column has had the exact same problem,
> but isn't showing it at the moment. It is defined in exactly the same
> way as the bottom list...
>
> The class is defined as follows in the style sheet:
>
> .style10 {font-family: Georgia, Verdana, "Times New Roman", Times,
> serif; font-size: 10px; }

10 pixels is unreadable for me.

> Any ideas?

Omit font-size from *all* of your CSS rules. That way your viewer gets the
font size she has chosen as her personal default.

--
Richard.

Scripsit thomas.frandzen@gmail.com:

> .style10 {font-family: Georgia, Verdana, "Times New Roman", Times,
> serif; font-size: 10px; }

Yes, it's wrong. It's so absurd that I smell trolling.

If you are serious, stop authoring WWW pages right now. You are on a
completely wrong track, and the faster you proceed, the more wrong you
go.

Then, start learning web authoring and CSS from a good book. You'll find
many recommendations in this group and its FAQ resources.

Beware that px valued font sizes in author style sheets are Evil and the
Sign of the Clueless. Then note that writing a random list of font names
is another sign of cluelessness. If you have a reason for suggesting
Georgia as the primary choice, then you cannot have a reason to make
Verdana the second option, in any possible or impossible universe.

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

Thank you all for your comments. I flatly admit that the layouting of
home pages is not one of my forces. I prefer to do the server side
database programming and the textual content, etc. and let others do
the actual design, but now I think I might go with your
recommendations and go get a book about the actual visual design of
websites... Wouldn't hurt, I suppose ;-)

I still don't get why the text is being shown differently despite
being formatted in exactly the same way, though.

(and I do know that the .style14 is not valid - it is an accidental
leftover from previous testing, I think - which shouldn't have any
impact on the differing font sizes in question)

But thank you for your comments. I'll have a look at it, and will
probably go with most of your recommendations.

-Thomas

thomas.frandzen@gmail.com wrote:

> On the front page of my website www.jamesboswell.info, ...
>
> The class is defined as follows in the style sheet:
>
> .style10 {font-family: Georgia, Verdana, "Times New Roman", Times,
> serif; font-size: 10px; }
>
> Any ideas?

Several. Why are you mixing serif and sans-serif fonts?

font-family: Georgia, Times, "Times New Roman", serif;

You only need to specify the font-family once - in body { } - unless you
want to change some individual part elsewhere. The first C in CSS is
"Cascading".

Then read this;
http://k75s.home.att.net/fontsize.html

"style10" is a very poor choice of class name. The name should describe
the purpose of the class. What sort of (poor) WYSIWYG tool did you use
for this page?

--
-bts
-Friends don't let friends drive Vista

Beauregard T. Shagnasty wrote:
> You only need to specify the font-family once - in body { } - unless you
> want to change some individual part elsewhere. The first C in CSS is
> "Cascading".

Except where it does not mean "Cascading". I was lulled into applying
"vertical-align" to the TR tag by this belief.
The contrast between HTML, where the TR tag is often the best place to
specify "ALIGN=TOP", and CSS, where applying "vertical-align:top" seems
totally ineffective could hardly be more stark.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

Steve Swift wrote:

> Beauregard T. Shagnasty wrote:
>> You only need to specify the font-family once - in body { } - unless
>> you want to change some individual part elsewhere. The first C in
>> CSS is "Cascading".
>
> Except where it does not mean "Cascading".

Like when CSS means " Style Sheet" ? <lol!>

> I was lulled into applying "vertical-align" to the TR tag by this
> belief. The contrast between HTML, where the TR tag is often the best
> place to specify "ALIGN=TOP", and CSS, where applying
> "vertical-align:top" seems totally ineffective could hardly be more
> stark.

Normally, tables of data want to be aligned at top of cell. Generally. I
use td { vertical-align: top; } in my master style sheet. And again,
normally and generally, if data is to be vertically _centered_ in a
cell, it's because the table is being used for presentation rather than
tabular data.

There are situations ... but the "C" still means "Cascading." ;-)

--
-bts
-Friends don't let friends drive Vista

Scripsit Steve Swift:

> Beauregard T. Shagnasty wrote:
>> You only need to specify the font-family once - in body { } - unless
>> you want to change some individual part elsewhere. The first C in
>> CSS is "Cascading".
>
> Except where it does not mean "Cascading".

It always does, but very few people understand the cascade; most people
who think they know CSS haven't even seriously tried to understand the
cascade. And the specifications are to be blamed, too. The concept is
just too complex for any normal human brain. But we have to do our best
with it.

> I was lulled into applying
> "vertical-align" to the TR tag by this belief.

This is a confusing issue but it has nothing to do with the cascade.

> The contrast between HTML, where the TR tag is often the best place to
> specify "ALIGN=TOP", and CSS, where applying "vertical-align:top"
> seems totally ineffective could hardly be more stark.

Such unexpected things need not reflect the cascade problems but seem to
originate from an assumed mapping of HTML attributes into CSS.

And I don't quite see how you get such results. If I set vertical-align:
top for a TR element, then the cells within the row become top-aligned,
unless some style sheet explicitly overrides that. I regard this is a
bug, since by definition, vertical-align is not inherited. Moreover,
even if it were defined as inherited, it should not get inherited into
table cells, since TH and TD elements have, in practice,
vertical-align: middle
in browser default style sheets.

If I try the following on IE 7 or Firefox 2, "foo" gets top aligned:

<table border="1"><tr style="vertical-align:bottom"><td>
hello<br>world</td>
<td>foo</td> </tr> </table>

By the specs, as I read them, it should be middle aligned.

Anyway, the proper way to make cells in a row vertically aligned in some
particular way is to vertical-align for the _cells_, not some enclosing
element. For example, if you have
<tr class="foo">...</tr>
you should not set
tr.foo { vertical-align: top; }
but
tr.foo th, tr.foo td { vertical-align: top; }

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

On 2008-03-09, Jukka K. Korpela <jkorpela@cs.tut.fi> wrote:
[...]
> And I don't quite see how you get such results. If I set vertical-align:
> top for a TR element, then the cells within the row become top-aligned,
> unless some style sheet explicitly overrides that. I regard this is a
> bug, since by definition, vertical-align is not inherited.

It is when it's set to inherit, and it often is set to that in the
default stylesheet.

> Moreover, even if it were defined as inherited, it should not get
> inherited into table cells, since TH and TD elements have, in
> practice, vertical-align: middle in browser default style sheets.

Appendix D of CSS 2.1 has

td, th { vertical-align: inherit }

They say this is based on extensive research into current UA practice.

> If I try the following on IE 7 or Firefox 2, "foo" gets top aligned:
>
><table border="1"><tr style="vertical-align:bottom"><td>
> hello<br>world</td>
><td>foo</td> </tr> </table>
>
> By the specs, as I read them, it should be middle aligned.

Not if td { vertical-align: inherit }. It's not a bug.

Scripsit Ben C:

>> Moreover, even if it were defined as inherited, it should not get
>> inherited into table cells, since TH and TD elements have, in
>> practice, vertical-align: middle in browser default style sheets.
>
> Appendix D of CSS 2.1 has
>
> td, th { vertical-align: inherit }

Thanks, I seem to have missed that one.

> They say this is based on extensive research into current UA practice.

Well, this particular rule can be interpreted as being common default
indeed. The _apparent_ defaults that I mentioned obviously stem from
this explicit inheritance and from

thead, tbody,
tfoot { vertical-align: middle }

_and_ from

tr { vertical-align: middle }

which is _not_ mentioned in Appendix D. Without this last rule, td and
th would, by default, inherit vertical-align from tr which has baseline
as the value (the initial value). So Appendix D isn't very consistent.

Moreover, IE does not support inherit as a property value at all. In
practice, its behavior in this area is mysterious. We might do some
handwaving and explain that it actually supports vertical-align: inherit
in hypothetical default browser style sheet, even though it does not
support anything like that when explicit.

Anyway, this confusion is _not_ part of the cascade confusion. The
cascade then comes as an additional mystery level: it specifies, among
other things, how an author style sheet (if present) and a browser style
sheet are applied together.

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