19 replies [Last post]
alice
alice's picture
Offline
newbie
Last seen: 15 years 28 weeks ago
Timezone: GMT+7
Joined: 2005-03-09
Posts: 2
Points: 0

Hi Guys n Gals,
How can I use relative text sizes (small, x-small, large etc.) so that the text appears the same size whether viewed in IE6 or Firefox?
Without doing something extra, text is much bigger than intended in internet explorer.
Hope you can help. This is driving me nuts.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

relative text sizes IE6 and Firefox

alice wrote:
… so that the text appears the same size whether viewed in IE6 or Firefox?
That's a lost cause. You, as web author, have no control over the font size displayed. The user can always override any font size you set.

[mode=opinion]
The idea of identical fonts in different browsers and pixel perfect layouts is a holdover from print and the associated graphic arts. The web is not print.

If there are differences from browser to browser, your visitor won't even know about it or care. He's only viewing your page on his browser, no one else's, and he is not going to say to himself, "Self, let's see what this baby looks like in another browser".

For your fonts, set the global 1 em font-size to a sane percentage of the user's default, 80–120%, and set element sizes in ems. Your design should be flexible enough to stand variations in your base size from 9px to 36px, because that's what it will be displayed at no matter what you want.
[/mode]

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

johnmcp
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2005-09-01
Posts: 7
Points: 0

There must be a way of getting sizes the same!

While I understand and believe kk5st's opinion, I still think it's important to get all sizing the same.

I've set the body tag to have a font-size : 100%; and then used ems for every size thereafter.

Surely there must be a way of defining an em to be the same everywhere.

In some cases, where I have used ems for heights of coloured divs, the colour "bleeds" into areas it shouldn't due to this stupid definition.

Anyone found a way to make relative sizing work the same on every browser.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 1 day ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Re: There must be a way of getting sizes the same!

johnmcp wrote:
I've set the body tag to have a font-size : 100%; and then used ems for every size thereafter.

There is nothing wrong with this approach, however I reckon its better to always define a font-size with %. % is generally understood to be a unit relative to something else, where as em is more confusing.

e.g.

p {font-size: 2em; line-height: 1.4em; margin: 1em 0;}

I believe is better expressed as

p {font-size: 200%; line-height: 1.4em; margin: 1em 0;}

in the first example, the em unit in font-size is half the size of the em unit in line-height and margin.

johnmcp wrote:
Surely there must be a way of defining an em to be the same everywhere.

There is. You give the font-size a px value. There are two problems with that. First, IE does not allow resizing of font-sizes specified in absolute units. Second its a slap in the face for any browser (user) who has set their user agent (web browser) to cater for any special visual needs they may have - e.g. extremely large letters due to poor eyesight, a ver high resolution monitor or large distance to the screen.

The increasing emphasis on the accessibility of websites "should" push the designer towards thinking of their site as a visitor on the device of the browser rather than the user as a visitor to their site. And like any good visitor, the website should be polite and respectful to the ways of the host - not stomp all over them, at least not if they want to be invited back.

Of cource you are welcome to take all the above with a pinch of salt. It all comes back to knowing your audience, if they don't mind and keep coming back, do anything you like!

johnmcp
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2005-09-01
Posts: 7
Points: 0

relative text sizes IE6 and Firefox

i should have mentioned that I am designing wai compatible templates. so setting px sizes was definitely not happening.

what you say about taking it all with a pinch of salt is true but remember in the uk legislation is changing to mean that you must cater for those with disabilities online as well as in present manners.

in the end I have settled for setting a font-size (and other sizes) in a way that looks ok on everything (instead of great on one and rubbish on another).

on this subject, what are user agents (eg screen-readers) doing to help web designers? we are sometimes sacraficing better layout to aid them? and what about w3c? they are doing a lot but surely they have to give a better way of aligning elements in a web page other than floating divs. these can have terrible knock on effects so it makes it difficult to position things exactly as you like and thereafter change things.

to finish off my rant, does anyone know of good articles about making css code maintainable. it used poor-man's variables and tried to group code together by div and position on the page but other than that I'm stuffed. Plus I notice that moving some things changes font-sizes (those bloody ems!)

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 1 day ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

relative text sizes IE6 and Firefox

For maintainability, you could generate your CSS file from php much in the same way as you generate html from php.

That way base colours and dimensions can be set once and derived values actually derived in code from those base values.

igorlicious
Offline
newbie
Last seen: 14 years 51 weeks ago
Joined: 2005-09-24
Posts: 3
Points: 0

relative text sizes IE6 and Firefox

I'm faced with the same problem. I realize there's no easy solution to this.

I have defined body as

font-size:80%

and then

various classes are either .8 or .9 em depending on the size I want.

This is scaleable. It looks good in Safari. It looks fine in Explorer on Windows. It looks great on Firefox on Windows.

But...

The text is WAY too tiny on the default install of either Firefox or Camino on Mac. Now a huge number of web sites fit this problem so on anything but my default installs of these, I've overridden the font size. I imagine most other Firefox/Camino users have done the same. Heck, Command + is all you need. I don't want to cater to what i perceive as a browser bug (don't need any debates on that here, it's what I think, that's all i mean by that), and if people are working around it, the font will then be too BIG on their browsers.

Any suggestions? Raising the font size to 100% ruins the look of the site on IE and Safari.

Anonymous
Anonymous's picture
Guru

relative text sizes IE6 and Firefox

johnmcp wrote:
Surely there must be a way of defining an em to be the same everywhere.
Can't you just define the body's font size as px and then 1em will be that px size so you can then use em to style any child below. Example:
body{font-size: 16px;}
div.classy{font-size: .8em;}
div.alert{font-size:1.5em;}
etc...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

relative text sizes IE6 and Firefox

You could use javascript to detect the browser to serve up a different font-size for the body.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

relative text sizes IE6 and Firefox

Tyssen wrote:
You could use javascript to detect the browser to serve up a different font-size for the body.
...but px is px anywhere, right. (Well, except in Opera...Wink)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

relative text sizes IE6 and Firefox

Triumph wrote:
Can't you just define the body's font size as px and then 1em will be that px size so you can then use em to style any child below. Example:

what you mean like Chris mentioned in reply to that question earlier ?

Chris wrote:
johnmcp wrote:

Surely there must be a way of defining an em to be the same everywhere.

There is. You give the font-size a px value. There are two problems with that. First, IE does not allow resizing of font-sizes specified in absolute units. Second its a slap in the face for any browser (user) who has set their user agent (web browser) to cater for any special visual needs they may have - e.g. extremely large letters due to poor eyesight, a ver high resolution monitor or large distance to the screen.

:roll:

This is an old thread with too many people posting new questions into it.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

relative text sizes IE6 and Firefox

Hugo wrote:
what you mean like Chris mentioned in reply to that question earlier ?
Well, yes. Exactly. :oops:

Is there something wrong with reviving old threads? Bringing up an old thread goes hand in hand with

Tony wrote:
1. Search and see if you can find a similar problem with a solution.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

relative text sizes IE6 and Firefox

Generally yes, old threads are old threads, if people have a question then start a new topic with fresh input rather than having to wade through many posts referencing slightly different questions asked.

The search point does not mean revive old posts it means look through old posts to see if they may contain the answers to your questions saving you the bother of asking the question or getting people to repeat information already given, in many cases often.

But it's no biggie, lets just not give a hang.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

igorlicious
Offline
newbie
Last seen: 14 years 51 weeks ago
Joined: 2005-09-24
Posts: 3
Points: 0

uh-huh

that's right: px is not an alternative. i used to have my site styled in px and then a friend said that my site wasn't friendly to him. he couldn't get it to a size he could read. i didn't know his vision was so bad. i guess he didn't want to tell me. yes, i told him he should use a better browser, but how many people out there are there like him? too many.

so px is useless for me, unfortunately.

old thread? gosh, i've been trying to deal with this problem for ages. surely there's a solution.

we have a decent way of dealing with explorer. firefox is the problem now, i think we should figure out a way to deal with that one...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 1 day ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Re: uh-huh

igorlicious wrote:
we have a decent way of dealing with explorer. firefox is the problem now, i think we should figure out a way to deal with that one...

My experience differs from yours. I have one page where part of the page renders in an apparently different font-size in each of the three windows browsers. IE is largest, FF is middle and Opera is smallest. The rest of the page is rendered essentially the same. So I thought I would investigate....

I did a series of checks against IE6sp2/Win, FF1.0.7/Win & O7.51/Win. All on WinXP sp2. I believe I have the default font size setting in Firefox and Opera, IE is set to medium.

Unstyled pages - font-size is essentially identical in all three browsers.

Styled page, several fonts tested with a range of font-sizes, 200% - 60%. Font-size is essentially identical in all three browsers.

This was odd. It didn't match with either your experience or the page I described above. After checking, the font-size that was the issue in the above page was 90% of an 80% font-size. So I added a check for that and browser differences showed up, refer pictures 1 & 2. For simplicity, I'll call the differences "rounding" issues.

IE is consistent in its font-size calculation, it tends to round high relative to FF.
FF is consistent in its font-size calculation, it tends to round low compared to IE.
O uses the rounded font-size in subsequent calculations giving inconsistent font heights, (ie. 72% is higher than 90% of 80%) and it tends to round low compared to IE.

The two test pages are: multiples sizes and same size, derived differently.

Final note, checking the DOM inspector in FF lists the default font-size as 16px and:
90% = 14.3333 (actual 14.4)
80% = 12.7333 (12.Cool
70% = 11.1333 (11.2)
60% = 9.5333 (9.6)

igorlicious
Offline
newbie
Last seen: 14 years 51 weeks ago
Joined: 2005-09-24
Posts: 3
Points: 0

relative text sizes IE6 and Firefox

i haven't used opera. too few visitors to my site to support.

i do, however, use safari (i know lots of people who visit using safari, including me 1/2 the time).

my problem is firefox.

the defaults on firefox on mac and firefox on pc don't seem to agree. firefox on mac (as well as camino) come with defaults so screwed up that most people increase the font size immediately. that said, i don't want to assume that people will do that. bad form.

if i set font-size to 85% and then text to .8em, it is unreadable on FF and Camino. it is fine on Safari, it's a tad big, but still ok on IE. if i get rid of the 85%, i'd be fine on FF and Camino (assuming the sizes weren't increased on the users browser, which they probably are), ok on Safari, but way too big on IE.

yeah, i may have to create some php code to serve up a different stylesheet based on which browser comes along. but we should be able to cook up a solution in css.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 1 day ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

relative text sizes IE6 and Firefox

How will you ever know if a user is happy with their IE setting, or Firefox, or ...?

I think either you make the decision to go with the users setting or you specify an absolute size yourself.

I vaguely recall reading somewhere that PC browsers generally use a default font-size of 16px (12pt) and Mac browsers tend to use a default setting of 12px. If that is the case it could be the root of the problem.

Out of interest have you tried one of the absolute units to see if there is any greater commonality across browsers and platforms?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

relative text sizes IE6 and Firefox

Since no matter what you do, the user can have whatever base size he wants, and since there is no way for you to know what the user has set, why not let the user determine the size? Make this a little smaller and that a little larger, but make the main text 1em=100% of the user's default font size.

Don't worry about this browser looking different than that. The user doesn't know there's a difference—he only sees the page in his browser.

Code against the factory defaults and ±2 steps of size change. If your client worries about the differences, you should have Mozilla (Seamonkey-browser only) loaded on your laptop with three user profiles, one with the default font size (16px), one with a larger font (20px), and one smaller (12px) (on a PC, Mac will have its own equivalents). Show your client that Tom, Dick, and Harry are in control, not the web author.

That's my advice. It's free and worth every nickel.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

relative text sizes IE6 and Firefox

Well, I kinda Xed with Chris.

Chris wrote:
I vaguely recall reading somewhere that PC browsers generally use a default font-size of 16px (12pt) and Mac browsers tend to use a default setting of 12px. If that is the case it could be the root of the problem.

I'm pretty sure you're correct on that, Chris. In Mac's case, the objective is that 1pt=1px. This is a consequence of Mac's DTP orientation. I suspect, though, that the pixel is virtual, and not an actual screen pixel. Macs resolve to 72px per inch, which is why most things appear larger on Macs than on PCs.

In either case, the objective is to set the font to a 12pt or 1/6 inch equivalent on the screen.

I believe that's the way of things, even if wrong in the detail. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

relative text sizes IE6 and Firefox

I'm beginning to think one cannot win an the only wise course of action is 1em=100%.

I've just been looking at a page rendered in Konqueror and was puzzled as to why my text was all but unreadable, checking the config panel showed that the browser default (medium) text size is set to 10px :? with a body percentage of 80% ,spider scrawl although I'm sure no one would leave it set to 10px.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me