Grow your CSS skills. Land your dream job.

Differing font size in FF v IE

  • # May 10, 2008 at 11:49 am

    hi guys & gals

    Can anybody point me to a ref (or how me) how to ensure that the size of font i specify in a stylesheet is adhered to in both FF and IE.

    my site http://www.housecallphysio.co.uk work as i designed/ planned in FF but in IE the size of text is all wrong. It is too small.

    I have set the general font size to 62.5% (1em) and then used em’s for the remainder of the stylesheet.

    I remember reading that using !important will force the style to override the users default sheet, but this in turn can be ignored is a user has used this tag.

    is this correct – or is there something else that i can do?

    suggestions as welcome as ever.

    thanks
    Browser shots in Opera, Windows and Firefox to illustrate my problem
    [attachment=2]080509-111540-msie-7.0-windows-xp-5d200823e0fa12ffe791a18632b73b5d.png[/attachment]
    [attachment=3]080509-111540-msie-7.0-windows-xp-5d200823e0fa12ffe791a18632b73b5d.png[/attachment]
    [attachment=0]MyFirefox.jpg[/attachment]

    # May 12, 2008 at 7:29 am

    On IE7, at 1024×768 resolution, I got the same font-size as in FF2. Did you forget to set IE’s font size to medium? You might have to customize the command bar to add the Size-button.

    # May 12, 2008 at 7:32 am

    Ohh, and the Serving the following areas-list would be somewhat annoying to read when the rest of the design got a good line-height. Why not use a general bulleted list? Easier to read than the |-separator.

    # May 12, 2008 at 11:08 am

    your correct, since i posted the question i found the answer to the font problem was to use the ‘HTML>body’ hack to alter the default font size in IE and other broswers.

    the code now reads as

    Code:
    * { margin:0; padding:0;}

    body {font-size:62.5%;}

    html>body{font-size;10px;}

    I am going to put the areas list into two columns to keep it concise and neat (in keeping with the rest of the page)

    thanks for the reply.

    # May 12, 2008 at 10:01 pm

    the !important is definitely a no no imo.
    i would try and stick to using one font size setting as well. dont mix 62.5% with ems. the only time i mix is i’ll set the body at small and then do percentages throughout the rest of the site. but even then you have to calculate whats added from the hierarchy and it can get complex if you have a big style sheet.

    so go with ems, go with px, go with pt, go with small medium large or go with % but mixing them up always causes problems imo.

    ems are the best i think just bc you can get so detailed with them. 1 em or 1.35 or 1.5 or .12 so on and so forth.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".