Preserved Topic: Computer Set Fonts (Page 1 of 1)

I created a site for a friend, you can view it at http://bo2k.sourceforge.net/newsite/information.htm .

Now what i was wondering is, he views the navigation font bigger, where, lets say Latest News takes two lines, where for me it takes one, of which how it's suppose to look. We think it's because of the font size setting on the computer. His is at Medium (which is default for XP) mine is Small (Default for Windows ME), is there a way i can fix this, where the font looks the same on both computers?

Thanks in advance.

:::::edit:::::

I forgot to explain *why* the links and other texts appear bigger or smaller in different browsers, but I'll try and do it now:
There are two ways of setting a font size - either as a relative size or an absolute size.
Relative means that you tell the browser to make the font small, medium, big etc - that's the same as using a value of 1-7 in the font size tag (3 is medium). But the disadvantage of these relative sizes is that you don't know if your visitor's browser considers a font of 15px or 20px as 'medium'. And if someone changes the settings in IE's VIEW menu all relative sizes will change.
If you want the text to have the same size in every browser you'll need to specify its absolute size in pixels. The browser will then ignore the settings for the relative sizes. And that's exactly what you need to do to make your navigation look like it's indended.

And since I'm being paid lots of money for linking to ALA articles I'll give you this link: http://www.alistapart.com/stories/fear4/

:::::::::::::::::

The solution is quite simple:

Since all your navigation links are in <div>s with class="navigation-links" already you can add this line to your CSS to specify all their font (and other) properties:

.navigation-links { font-family: Verdana, sans-serif; font-size: 14px; font-weight: bold; color: #67945F; text-align: center; }

Now you can remove all those <font> and <strong> tags around the links:

<td width="96">
<div class="navigation-links">
<div class="green2">
<p>Latest News</p>
</div>
<div class="over3">
<p><a href="index.htm" onFocus="this.blur()" target="_self">Latest News</a></p>
</div>
</div>
</td>

If you want to know more about how CSS works, have a look at the FAQ:
http://faq.ozoneasylum.com/73/ http://faq.ozoneasylum.com/90/

Have fun,

kuckus (cell #282)

[This message has been edited by kuckus (edited 06-16-2002).]

Good advice, kuckus...yup...a bit of CSS will fix that problem right up...

Of course, most browsers other than IE have a "text zoom" feature of some sort which will change the size of fonts defined even in pixels. So don't rely *too* heavily on this solution.