[thelist] Confused by 'ems'...

[JTocher]

Hello Listees... 

This question is almost embarrassing because it should be so simple, but I
feel that something is just not getting through my head on using the 'em'
attributed for type size!

I am using a single stylesheet on a site and trying make it look the same
across platforms - the client does NOT want to use browser detect to check
platform and serve up a different sheet for Mac and Windows. They are using
a wysiwyg program to add content to templates and are concerned about
'production' routine having to 'link' a stylesheet to add content and
remember to 'unlink' the stylesheet before posting the page.

In all that I've read - and believe me - I've scoured the stylesheet
tutorials - the 'em' is supposed to 'read' the same size on Macs and Windows
- it most certainly does NOT! at least in the implementation I'm using. Am I
missing something? It seems using a tag <font size="2"> gives more
predictable results across browsers and platforms than the almighty 'em' but
how to do that in a stylesheet? Using that attribute in the stylesheet makes
the type 2 pts! and the 'small,' 'x-small,' is definitely not given the same
size...

Also, in using the 'em,' I had different results between IE and NN - for
example I have a table and within the table have several links (oh yeah, I'm
using different color links in different portions of the page). In order to
get the link text to display the color that I want in IE, I have to assign a
class both to the <a> tag AND add a <span class> to the link text... i.e.,
<a href class="foo"><span class="foo2">link</span></a>.

So, within this table, I start my information with a <p> tag - this seems to
be the start of nested 'ems' within Netscape as each <span> tag makes my
links get progressively smaller. (I'm assigning my foo2 class as .7em). This
is demonstrated at...

http://serversolutions.com/averra/lifeway_deliver/c_staff.asp

The only way around this seems to be to take the <p> tag out altogether.
This works ok, but curious as to WHY it did not work with the <p> tag.

Can anyone point my browser in the right direction to get an indepth
knowledge of how 'ems' interact with other elements on the page? I know they
are a 'relative' size and inherit the size of it's parent (presumably my <p>
tag), but is there some way to stop this inheritance? Also, some example
code of ems used in actual practice would be helpful to peruse.

tia for your insights! and have a Happy Thanksgiving all...
Janice