SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 vs Firefox font-size keyword inconsistencies

    Hi everyone. I read in "Bulletproof Web Design" to set "font-size: small" on the "body" element and then use percentages to set font sizes on everything else. However, Internet Explorer 6 displays fonts one size larger in IE6 compared with Firefox.

    Here is the complete test document
    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    <style type="text/css">
    
    body{
    	font-family: verdana, arial, sans-seif;
    	font-size: small;	
    }
    
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    </head>
    <body>
    <p>Testing p tag size</p>
    <h1>Testing h1</h1>
    <h2>Testing h2</h2>
    <p>Back to p again</p>
    
    </body>
    </html>
    Any ideas what is causing the problem? I've heard that IE6 will render fonts one size too large in "quirks" mode, but as far as I can tell the example above has a complete DOCTYPE. BTW, I have the font size in IE6 set to medium, which I assume is default (View->Text Size->Medium).

    Thanks in advance

    EDIT: IE6 is rendering other pages - pages on other websites - with the font size too large as well. Has anyone had this problem before?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello, you didn't use the complete code from the book
    Code:
    body {
        font-size: small;
    }
    * html body {
        font-size: x-small; /* for IE5 Win */
        f\ont-size: small; /* for other IE versions */
    }
    html>body {
        font-size: small; /* be nice to opera */
    }
    If you put '* html' before a selector - only IE6 and below will see that css.

    The forward slash in the second font-size declaration is a hack to deliver styles to IE6 only.

    Hope it helps,

    In any case IE6 and firefox should display the same font-size, the font-size difference is in IE5.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I should be using that code for backwards compatibility.

    But my problem is with IE6. Even with that extra snippet of code, IE6 (not IE5) renders fonts one size too large. At this point I'm thinking there may be something mis-configured with my copy of IE6. If that's the case, I'm at a loss as to what.

    My copy of IE6 is rendering fonts on other, commercial websites too large also.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Your setting in IE6 for default size text should be 'Medium'

    View > Text Size > Medium

    As I said - IE6 renders the font-size keywords the same as other modern browsers.
    It's only in IE5 that this issue exists

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My Dell laptop's screen was set to 128dpi (factory default). IE overcompensates by making text larger than it should. You can change a registry setting to make IE behave as if the screen were at 96dpi and the large font size issue disappears.
    Last edited by heliotropic; Aug 21, 2007 at 12:24.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •