Controlling font size accurately across browsers

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I have a large commercial site to rebuild, where the design has been
produced by the pixel-counting method. It's also one of those sites
where cramming every space full of content is seen as better than a more
spread-out and usable design that uses some scrolling. Not surprisingly
it's the work of paper-based magazine designers, not web designers.

This leaves me with several conflicting requirements:

 - The body text size for the "article" pages should be 1em, for
well-known usability reasons.

 - The "index" pages may require pixel-based font sizing control,
because otherwise I can't constrain the text to fit in the available
space. These spaces are fixed pixel widths - they're usually the size of
a bitmap image. Additionally they're often "headline text" which means
few short words and some clunky behaviour for linewrapping.

- It must work cross-browser, including IE6 and IE/Mac

The real problem here is that IE blows the whole lot apart.  With its
well-known problems of an excessive default scaling for ems to pixels, I
can produce a good implementation for the well-behaved browsers (even on
the Mac) but any IE rendering of the page only works when the user's
text size is reduced to "Smaller". This is particularly bad if I attempt
to use <h*> markup, where the differences are particularly visible.

Any suggestions ?

Are there any "CSS hack" based techniques which will let me set a
default size of 1em/100% for web browsers, then an 85% value for IE
only, hidden by some parser hack ?

(I am _not_ interested in a discussion of em vs. pixel sizing - that's a
different issue)

Re: Controlling font size accurately across browsers

Andy Dingley wrote:
Quoted text here. Click to load it

body { font-size:85%; voice-family: "\"}\""; voice-family:inherit;
font-size:medium; }

Re: Controlling font size accurately across browsers

On Sun, 18 Sep 2005 12:33:59 -0400, C A Upsdell

Quoted text here. Click to load it

But isn't that (the Tantek Celik hack) just going to work on IE5 ?   I
need to make it work on IE6

(By some bizarre logic, I don't actually need to support IE5 / PC as my
boss won't be testing for that, but he will be carefully testing the
almost unused IE5/Mac combination)

Re: Controlling font size accurately across browsers

Andy Dingley wrote:
Quoted text here. Click to load it

Works for me with IE6.  Don't know about IE7.

Re: Controlling font size accurately across browsers


Quoted text here. Click to load it

Wouldn't it be easier to use a documented features of IE then: the
conditional comments?  Like this:

  <!--[if IE]>
  <style type=3D"text/css"/>
  ... your IE rules here ...

I find this approach much better than relying on various parsing
errors in IE to get things right.  Using a comment which will be
ignored by all browsers except IE is much cleaner.

Martin Geisler                                     GnuPG Key: 0x7E45DD38

PHP EXIF Library      |  PHP Weather             |  PHP Shell | | /
Read/write EXIF data  |  Show current weather    |  A shell in a browser

Content-Type: application/pgp-signature

Version: GnuPG v1.4.1 (GNU/Linux)


Site Timeline