Hi Ian,
Great-looking site! and interesting resources too...
Ever since I started to work with CSS and - more recently - to
customize our university Moolde, I've been especially irritated by the
inconsistent ways in which various browsers, versions & computer
platforms render font size. As you say, the very same HTML page can be
anything from illegibly tiny to oversize depending on the end-user's
environment.
Since our corporate environment meant MSIE on Windows 2000 (now XP)
I first developed for that browser exclusively. More recently,
concurrently with our adopting of Moodle, in fact, we are also using
more & more Firefox (very few Macs around, however).
My personal history of CSS coding for font-size is as follows:
- I used fixed sizes, i.e. pixels to get a consistent display
problem: pixel-coded fonts are resizable by the end-user in Mozilla browsers but not in MSIE (OK, it's a well-known bug, but...) - I used relative sizes: % and ems to solve MSIE's resizing pb.
problem: heritage means that fonts within classes within classes are automatically sized down (see http://www.maxdesign.com.au/presentation/relative/) - I
am now using a combination of absolute-size keywords (small, etc.) , %
and ems. This combination gives satisfying results on the 2 browsers I
can test, MSIE 6.0 and Firefox 1.0 on Windows XP.
The advantages of solution #3 are as follow:
- by setting font-size:small
as the starting-point, e.g. in the body class, my HTML pages are
displayed exactly the same in both browsers, provided that MSIE is set
at View/Text Size/Medium or Firefox is set at View/Text Size/Normal (or
100%).
problem: I have wondered for a long time why what was "medium" to MSIE was in fact larger
than what was "normal" (or 100%) to Mozilla. I have found the
solution (when using absolute-size keywords): in order for HTML pages to display at the same size in both
browsers, you must have this doctype declaration at the top of your
HTML page: <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
- because of the problem mentioned above, many MSIE users (including myself) set by default their browser at view/text-size/smaller
because otherwise many visited sites are displayed at what we consider
to be an oversize size; well, those visitors won't see a very big
difference for HTML pages coded the way I have chosen, whether their
text-size is set at normal or smaller (i.e. it will still be legible at
the smaller size)
- the annoying inheritance problem above has disappeared...
I am now planning to work on a Moodle theme based on my combination of absolute-size keywords (small, etc.) , %
and ems. And I need fellow-moodlers' help.
a) could you please go have a look at my personal site
http://rezeau.org which is uses a "mixed absolute & relative"
stylesheet, resize the text-size view (within reason) in various
browsers and tell me of any problems... I'm afraid it's in French...
b) regarding my planned Moodle theme, I'll have to place the <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional etc.
doctype declaration in the header.html file. I have already tested it
without any apparent problem. Do you think this might lead to problems?
Looking forward to your remarks,
Joseph
I'd really appreciate any constructive comments you might have (especially the "Have you considered doing x, y or z in order to improve it?"
