Post Archive

› March 18, 2002

We Should NOT Be Ashamed

  • Reported by Nate

Updated CSS for this site to try using EMs. A limited browser test looks hopeful, although mozilla doesnt seem to want to increase the lineheight. I also updated to the high pass filter, which prevents mac ie 4.5 from trying to render the css here. If no one mentions any problems on untested platforms/browsers then the next step will be to provide an alternate stylesheet for those that want to read this site with larger text but don't want to adjust their browser font size settings. Although I like the small fonts here, I certainly wouldn't bother upping the font size on each visit, this way folks can have prefered stylings saved in a cookie - much like the old font resizer, but without all the looping dom change baggage. Leave a comment if you like/dislike how the EMs are working.

Comments

1. March 19, 2002 03:16 AM

Quote this comment

francois Posted…

Good work. I'll probably always view this site in WinIE6 "larger" font size setting. Some other comments:

1. Text field fonts (e.g. what I'm typing now) are almost illegibly tiny
2. MacIE5.0 has the same problem I experienced on my site -- at default, font sizes are illegibly small, and only becomes visible at 200% text zoom. But then the .nav text is too big. 3. MacNN6 looks fine 4. MacNN4.7 and MacIE4.5 do not read the stylesheet, as intended

2. March 19, 2002 07:05 AM

Quote this comment

Nate Posted…

Ah thanks for the catch francois, the input text should show up and scale correctly now. I'm trying to reproduce the MacIE5.0 problem you are reporting, but it looks fine on my ibook. Are you using osx?

3. March 19, 2002 07:57 AM

Quote this comment

francois Posted…

MacOS 9.2.1 or more specifically, MacOS Z1 - 9.2.1 (Installed with OSX.)
Browser: Microsoft Internet Explorer 5 Macintosh Edition or more specifically 5.0(2022)

This is quite intriguing... if this (too small fonts when using EM units) doesn't happen on anyone else's Mac IE5, then the main problem with using EM disappears. Then I'd say the alternate stylesheet may not be necessary.

But I would want to make sure of this first. Isn't Mac IE5 supposed to be one of the most standards-compliant browsers on the market?

4. March 19, 2002 08:38 AM

Quote this comment

Mark Posted…

Using Mozilla 2002031803, text zoom set to 100% (which is the normal setting): The first two comment fields (Name and email address) look fine, but in the URL field, descenders are lopped off, and in the Comments field the font size is something like 16px, eg. quite large :)

5. March 19, 2002 09:23 AM

Quote this comment

Nate Posted…

mark, looking at moz 2002031104 for win (just downloaded) - I don't get the descender problem, but do have large font in textarea (comments). I'm thinking that moz might classify textareas different than text inputs (perhaps correctly?). A seperate textarea class should solve this problem, will test shortly.

6. March 19, 2002 09:37 AM

Quote this comment

Dougal Campbell Posted…

Was it your intention to also filter out CSS for IE5.5 Win? Your site now comes up completely unstyled for me :-/

7. March 19, 2002 09:42 AM

Quote this comment

Nate Posted…

Oh whops, i didn't notice that the high pass filter cuts off at win ie 6, that seems a tad harsh. I suppose a better solution would be to divide the css into two groups within one sheet and boxmodel hack only the stickiest stylings.

8. March 19, 2002 08:44 PM

Quote this comment

Sam Posted…

On Mozilla 0.9.9 and IE 5.1 on Mac 0S 9.2, basically illegibly small. 1em==14px. 0.6 em may be a bit open the small side. OTOH, it's easy to increase the display size in both these browsers, and now it's *possible* on IE/Win! So thanks. Screen shots at http://afongen.com/demo/webgraphics/ Increasing to a legible font size pushes the "nav" block too far down, so it overlaps the text below.

9. March 19, 2002 09:54 PM

Quote this comment

Nate Posted…

Sam! that's fantastic thanks so much. I now understand something about font sizing I didn't earlier - I didn't understand that there was an extra layer of font size specification by the browser (or many browsers anyways). So there really are many factors influencing final font size: author css browser font size pref setting browser text zoom user css and in addition various flavors are concoted by different os/browser/resolution choices I'm glad to now be able to reproduce the unreadable font size on mac ie, and I think I understand what paul was saying about not being able to predict user font settings - he didn't mean text zoom, but rather pref settings. So, the dilema still exists - do you dictate font px but prevent resizing on some browsers, and yet improve chances of readability. or do you allow font resizing but open things up to being unreadable with default settings. I'm not sure I really have a grasp on this yet.

10. July 31, 2002 01:14 PM

Quote this comment

Greg Posted…

I have had a nightmare with em on the mac. I produced a site that passes the w3c validator, and css validator, but yet the fonts show up illegibly tiny when using nn6 on the mac. I switched it back to px to avoid the problem. Another thing i noticed, was that if you accidentally put a space in between the number the the ‘em’, then your css if not valid, so bad things will happen. Of course IE copes with this malformed css, so you won’t notice until you check it on another browser.

11. August 2, 2002 09:22 AM

Quote this comment

francois Posted…

I’m familiar with EMs coming out too small on the Mac. On my own site, I coped like you did, by switching back to pixels but then also providing an alternative stylesheet using relative units. That’s not a great solution. On the last site I did, I used EMs optimised for display on PCs, then implemented a server-side browser-detect (using PHP), that simply adds the following CSS rule to each page when a Mac is detected: BODY { font-size: 120% } It seems to work.

12. February 5, 2003 01:31 AM

Quote this comment

netscape textzoom Posted…

Does anyone know how to dynamically set the textzoom property if a user is using a Netscape browser???? benc007@sbcglobal.net