• Registered: 2008-06-25
  • Posts: 261

Topic: CSS: Fonts are messed up on Mac: Safari and Firefox

This one is hard for me to debug because I don't actually have access to a Mac to test on, but a friend who does sent me a screenshot showing that the fonts on my site come out a lot bigger in that environment than they do on Windows (both IE and Firefox work fine there).

Has anyone dealt with tweaking a site's CSS for different browsers?  I have a feeling that if I can just specify the <body> font a little differently for that platform, everything will be fine.  But I have no idea how to do that, so pointers to tutorials or anything that'll help me get started would be great.  Thanks!

  • Registered: 2007-05-17
  • Posts: 924

Re: CSS: Fonts are messed up on Mac: Safari and Firefox

I use that trick:

* html {
  font-size:                      small; /* IE6 hack, now text size renders exactly as on FF and Safari */
}

Johnson's Website

  • Registered: 2008-06-25
  • Posts: 261

Re: CSS: Fonts are messed up on Mac: Safari and Firefox

How does that work, exactly?  I don't see any actual browser/platform detection in there.  Does it rely on idiosyncratic IE behavior with font-size: small?

Because so far, IE isn't giving me any problems with the font specifications I've got in my CSS, and I'd just as soon not change the parts that aren't broken, you know?

  • Registered: 2008-10-19
  • Posts: 932

Re: CSS: Fonts are messed up on Mac: Safari and Firefox

Well this goes back to the browser wars back in the 90's. Microsoft and Netscape fought each other tooth and nail, including browser rendering. Unfortunately, we as developers, still to this day suffer from it.

The CSS small tag is an IE specific tag mostly to answer your question. smile