em or not for font

[jerrynyc]

I've set my font-size to .9em. However, in IE for PC when the viewer changes to font to larger it becomes huge. This doesn't happen in IE for Mac. A friend suggested that the problem is em and that it would be better not to specify a font size. Is he right?

[jetboy]

em is a not a fixed unit, and as such can be adjusted by the user. px (pixels) are a fixed unit, and can't be altered easily by the user, at least not in IE. So if you really want fixed sizes, change your units to px. However, your average usability zealot will claim that this is a very bad idea, and you should allow users to change font sizes if they want to.

[fatnewt]

Stick with the em, IMO.

IE doesn't support it perfectly right now (as it can get ridiculously large or ridiculously small)...

But when you use px and other fixed units, sometimes you make it too small for others.

I'd recommend setting a font-size, because you're probably going to want some parts to be slightly bigger. Using the em allows you to maintain proportion, and increase the accessibility of your site.

It's still, of course, a matter of opinion.

[jerrynyc]

Originally Posted by fatnewt

Stick with the em, IMO.

IE doesn't support it perfectly right now (as it can get ridiculously large or ridiculously small)...

But when you use px and other fixed units, sometimes you make it too small for others.

I'd recommend setting a font-size, because you're probably going to want some parts to be slightly bigger. Using the em allows you to maintain proportion, and increase the accessibility of your site.

It's still, of course, a matter of opinion.

I wonder if % would work better?

[jetboy]

Check out:

http://www.alistapart.com/stories/fear4/

[jerrynyc]

[quote='jetboy']Check out:

http://www.alistapart.com/stories/fear4/[/QUOTE]

Seems a little out of date.

[earther]

Sometimes percentages seem to work better sometimes ems and occasionally a fixed pixel font size does the trick. All depends on your particular needs.

[Zoef]

The trouble with IE is with em sizes smaller then 1. So the trick is to set a body textsize in % and not to go lower then 1em on your elements.

As recommended by owen Briggs:
http://www.thenoodleincident.com/tut...phy/index.html

Rik

[jerrynyc]

Originally Posted by Zoef

The trouble with IE is with em sizes smaller then 1. So the trick is to set a body textsize in % and not to go lower then 1em on your elements.

As recommended by owen Briggs:
http://www.thenoodleincident.com/tut...phy/index.html

Rik

So if I set font-size: 1em; then I shouldn't have any problems with IE? Or is it still necessary to set a body text-size in %? Finally, what would woke best with NS4X?

Jerry

[Zoef]

Originally Posted by jerrynyc

So if I set font-size: 1em; then I shouldn't have any problems with IE? Or is it still necessary to set a body text-size in %? Finally, what would woke best with NS4X?

Jerry

I don't know the answer to either question but this is my take on it:

The default font-size (100%, 1em) is just to big, in all browsers, so that's why I like the 'body percent' method. It allows one to have better styled text across most browsers.

About NN4.X, that old dinosaur... I don't really style for that browser right now but my guess is that since it is not all that good at inheritance it this method might just not work.

Rik

[jerrynyc]

Originally Posted by Zoef

I don't know the answer to either question but this is my take on it:

The default font-size (100%, 1em) is just to big, in all browsers, so that's why I like the 'body percent' method. It allows one to have better styled text across most browsers.

About NN4.X, that old dinosaur... I don't really style for that browser right now but my guess is that since it is not all that good at inheritance it this method might just not work.

Rik

I tried the body % method but still the text is huge when I go to a larger size in IE.

[devised]

Is the font size cascading upon itself? If a parent element has a font set at 2 em and then the child element is also set for 2 em, then I believe it will actually be 4 em. Are your relative font sizes stacking up? Just a thought...

[jerrynyc]

Originally Posted by devised

Is the font size cascading upon itself? If a parent element has a font set at 2 em and then the child element is also set for 2 em, then I believe it will actually be 4 em. Are your relative font sizes stacking up? Just a thought...

I don't thinks that's the problem. Here is my style sheet

body, td.main, ul{
font-size: 100%;
font-family: Verdana,Arial,Helvetica,sans-serif; color:#006666;
background-color:#ffe6cc;
}
H1, H2, H3, H4, H5, H6, ul, P{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #006666;
}
H5.jean{
margin-top: -2.5em;
margin-bottom: 0.3em;
}
H3.theme {
margin-top: 0.1em;
margin-bottom: 0;
}
P{
font-size : 1em;
font-family: Verdana, Arial, Helvetica ,sans-serif;
color: #006666;
}
A:link{
color: #006666;
text-decoration: none;
}
A:visited{
color: red;
text-decoration: none;
}
A:hover{
display:block;
color: yellow;
text-decoration: none;
background: #006666;
}
A:active{
color: purple;
text-decoration: none;
}
A.main:link{
color: blue;
text-decoration: none;
}
A.main:visited{
color: red;
text-decoration: none;
}
A.main:hover{
display:inline;
color: purple;
text-decoration: none;
background:none;
}
A.main: active{
color: purple;
text-decoration: none;
}
td.sidelinks a{
display: block;
border: 1.4px solid black;
border-color: #006666;
padding; 2px;
margin-top: 0;
padding: 0.6em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
td.sidelinks {
background-color: #ff9966;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}
td.toplinks {
background-color: #ff9966;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
padding: 0;
}
td.main{
background-color: #ffe6cc;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 2em;
max-width: 100px;
}
HR{
width: 100%;
height: 0.4em;
color: #006666;
P.copyright{
font-size : 1em;
font-family: Verdana, Arial, Helvetica ,sans-serif;
color: #006666;
}

[Travis]

As far as I know, its not a problem with your code, its just an IE 'bug'. Don't you just love them?

Edit:


Or it could be that 0.9em font size you have set for your side links. Is that the part thats getting huge and tiny?

[redux]

just a quick note about % vs. em...they're both the same, in most cases (some browsers may have some slight rounding issues with the numbers). 1em = 100%. 0.75em = 75%. 0.5em = 50% etc etc

[jerrynyc]

Originally Posted by Travis

As far as I know, its not a problem with your code, its just an IE 'bug'. Don't you just love them?

Edit:


Or it could be that 0.9em font size you have set for your side links. Is that the part thats getting huge and tiny?

No it's all text including the content in the main cell. IE for Mac doesn't seem to be a problem.

[Paul O'B]

Hi,

I'm not sure if this is related to your problem but are you using a doctype as quirks mode will increase the size of the text in tables (and lists) if you specify things like this :

body, td.main, ul{
font-size: 100%;

Have a look here http://www.ericmeyeroncss.com/bonus/render-mode.html for some tips on inheritance and doctypes and tables etc.

Paul

[jerrynyc]

Originally Posted by Paul O'B

Hi,

I'm not sure if this is related to your problem but are you using a doctype as quirks mode will increase the size of the text in tables (and lists) if you specify things like this :

body, td.main, ul{
font-size: 100%;

Have a look here http://www.ericmeyeroncss.com/bonus/render-mode.html for some tips on inheritance and doctypes and tables etc.

Paul

I am using a doctype 4.1 transitional.

[Paul O'B]

Hi,

I am using a doctype 4.1 transitional.

With the URI I hope.

Paul

[jerrynyc]

Originally Posted by Paul O'B

Hi,



With the URI I hope.

Paul

Of course.

[Paul O'B]

Have you got a link to the page so we can see the effect? (Or post the html code as you have already listed the CSS)

Paul

[jerrynyc]

Originally Posted by Paul O'B

Have you got a link to the page so we can see the effect? (Or post the html code as you have already listed the CSS)

Paul

www.thevoiceworkshop.com

[Fleeters]

Why not use keyword font sizes?? xx-small, x-small,small,medium,large,x-large,xx-large. One problem though. IE5 displays keyword fonts wrong, its the way they set it up. they linked those keywords to the <font size> tag but missed the sizes. So to get around that use tantek method(box model hack)
p{font-sizex-small;/*<<size we want for IE5*/
voice-family:"\"}"";
voice-family:inherit;
font-size:normal;}/*<< font size intended*/
}
youll probably have to play with ait a bit but youll get it.
one other plus side to keyword fonts: they will never go below 9pt. or is it 9px well one of the two, you can assure it will always be readable

[Zoef]

On the page I gave you , did you also click through to this page?

Meanwhile, 60%, 69%, and 76% give reliable reading sizes smaller than 1.0em.

There are two more useable ranges accessed with 86% and 93%, but as you see they're not precisely identical across browsers, just similar.

Rik

[jerrynyc]

Originally Posted by Zoef

On the page I gave you , did you also click through to this page?

Rik

Thanks for your suggestion. I set the body to 93% and the P to 1em. That seems to work and now when I set the text size to larger it's no longer huge.

Jerry