Is there a way to avoid inheritance using em font sizes?

I'd like to avoid elements inherit parent font size using em's

[turk182]

At present I'm using font size in pixels in my style sheet, but users are not able to resize font size from their browser and so I'd like to use em's.

The problem I've found is that html elements inherit from their parents the font size, so font size of nested elements is smaller than it should be.

Is there any way to use em's without having to modify all my web pages? (I mean, using a different style with a bigger font size in nested elements, so it would render in the correct size, is not an option, because of the huge amount of code I'd have to rewrite)

Thanks

[thejenn]

Have you tried setting up Style Sheets on the site? I have a master CSS for each and every site. I use that to set the font size by pixel. That way it's an actual set size and not an arbitrary number based on the individuals computer.

If you do this, just make sure you don't go overboard. A 10 pixel font that looks great on IE on your PC may be unreadable on a Mac.

[turk182]

At present I uses CSS in my site.

The problem I have is that if I change

.text11{FONT-FAMILY:Verdana, Arial, Tahoma, sans-serif;FONT-SIZE:11px}

for

.text11{FONT-FAMILY:Verdana, Arial, Tahoma, sans-serif;FONT-SIZE:1.4em}

in my CSS, the body of all my pages look great, and the users can change the font size of their browser if they're visually impaired or simply want to read the page more easily, but the nested elements (tables inside the main table) are to small. The .text11 style is applied twice, one for the main table and another for the nested one (cause is inside the first one), so the font size is reduced twice (1.4em of 1.4em).

Is any way to avoid it?

[Longhaired Genius]

Ems cascade. That's the way it is so you just have to get used to it and deal with it. Having said that I think ems are the best way to specify font sizes, 'cos when you get used to them you can use them to advantage for padding and margins and open up a whole new world of flexibility.

Leaving aside the question of why you're using nested tables anyway, if I were in your position I would probably give both tables a class, set the font-size of the outer one to 1em and the font-size of the inner one to whatever you think is best. That deals with the cascade because 1*x=x.

[tedster]

The thing that's confusing me here is that 1.4 times 1.4 is 1.96.

So, shouldn't the font get BIGGER, not smaller, as it compounds? It seems to me that should be the case whenever the intial value for em is greater than 1.

[dingman]

1em is the height of 'm' in the current font. 'm' is not as tall as, say 'l' or any of the capital letters, so wouldn't "font-size: 1em;" give you a font only a little more than half as tall as the current one?

I could easily be missing something here, but I'm puzzled.

[tedster]

1 em means that a rendered "m" will be the size of an "m" in the browsers default setting.

[dingman]

ok, thanks tedster.

[turk182]

The thing that's confusing me here is that 1.4 times 1.4 is 1.96. So, shouldn't the font get BIGGER, not smaller, as it compounds?

Sorry Tedster, I meant ex's, no em's, so you actually get a SMALLER font. The core problem is the same.

I may try your solution. Give the outer table a 1em class a the inner whatever class I want. The problem I think I'd find is that I use nested tables extensively, not only for positioning but also for making thinks like margins of a given width or height. I suppose that if I gave ALL tables a 1em class except the one I want to modify I'll solve the problem.

Thanks

[tedster]

...also for making thinks like margins of a given width or height.

You probably know the song I'm going to sing here - the CSS Official Anthem. Seriously, even if you retain tables for layout, CSS was MADE for margins and borders. Give it a try - you'll love it.

[turk182]

the CSS Official Anthem

You're correct tedster, but

1: it's and old design, so CCS it's not extensively used. I know I should change a lot of things of the site and
2: i'm trying to keep my style sheet as small as possible. Looking at my logs I realized that the style sheet was the most requested file (apart from images like blank.gif ;)), and because of its big size, it took almost 10% of our bandwidth, at present one of the most critical points of our site. I still don't understand why it's downloaded so many times, when the logic thing would be it to be downloaded one time per session or less (if it's loaded from the cache).

[Jo_Bennett]

You may be interested to know that an Em is an old typographic measurement inherited from the days of metal type (pre computers). It actually represents the size of the block of metal that a letter M in a given font sat on. Since all the metal blocks were the same height that means that an Em is actually a measure based on width. That's why a value of 1.0 Em doesn't make your font smaller - it sets your text to 100%.

I use CSS for all my sites these days and I find getting font sizes that work across platforms, browser versions etc. a nightmare. Ems are the best option I've found so far but they can still vary wildly and IE6 seems way out of sync with previous versions. The inheritence problem is something that I've got used to but it still catches me out sometimes.

I want font sizes that users can adjust if they need to and I don't want to have to produce multiple versions of pages for different browsers. Has anyone found a workable solution?

[jdMorgan]

turk182,

Not to divert your thread, but...

I still don't understand why it's downloaded so many times, when the logic thing would be it to be downloaded one time per session or less (if it's loaded from the cache)

Check a page which includes your style sheet with a Cachability Checker [ircache.net]. It is likely that the cache-control settings for your CSS file are missing or incorrect.

Jim

[indiechild]

Jo_Bennett, do you mix and match different font size units, e.g. "em" and font size keywords? I found that when I did that, browsers would screw things up because each browser had a slightly different definition of "x-small", "small" etc.

Now that I use "em" units only throughout the entire page, I find that the font size remains consistent on all browsers. Of course that's excluding NS4 and IE4, but you can't have everything :)

[Jo_Bennett]

I have tried to do all sizing with ems and I've found that they are generally OK at most typical resolutions if the browsers are set to default display sizes. I've found problems when users change the browser font sizes to smaller, larger, etc. then things get less predictable.

I've just read something which might solve some of my problems posted by Bobince in another thread:

"em font-sizes in IE4-6/Win are weird... they scale more than they should when you change the 'text size' setting. Which can make text barely readable if you use, say, 0.8em and the user chooses 'smaller' on the text size menu. This problem doesn't happen with percentages, and if the font-size is relative to another non-em font size (eg. a div at 120% containing a paragraph at 0.8em) there is no problem, it is only when the em is relative to the size inherited into the html element this happens.

To sum up: 'em's good, but best when combined with a '%' font-size on the body element. '%'s also good most of the time."

I'll be testing that out.

[indiechild]

Jo_Bennett: if a user changes his/her default browser text size, it's nothing we should worry about. Generally they do it because text on a particular size was too small, so they upped the text size in order to read it. They'll change it back to default ("medium") if they notice it's too big on your site. Most users would never change the text size in any case, and the ones that do certainly know what they're doing.

Basically, it's out of our hands. And rightfully so. The user has control, not us :)

[Hagstrom]

Now that I use "em" units only throughout the entire page, I find that the font size remains consistent on all browsers. Of course that's excluding NS4 and IE4

I use percentages and I don't have a problem with IE4.
On NS4 you must close all your paragraphs (</p>) and if it still looks a little weird then try sprinkling a few </p>'s here and there in the document.