font-size: large looks different in IE 8 quirks vs. standards mode

Question 1

The problem with font-size in quirks mode is that when using medium, large, x-large etc, the browser is always showing the font as one step larger than in standards mode.

This means large in quirks mode is the same as x-large in standards mode.

Try changing your code to this:

<html>
    <head>
        <title>IE 8 Quirks Font Size</title>
        <style type="text/css">
            #testDiv
            {
                font-size: x-large;
            }
        </style>
    </head>
    <body>
        <div id="testDiv">Here is some text</div>
        <div>And some unstyled text</div>
    </body>
</html>

That should give you the same result in IE 8 Standards Mode as your current CSS does in Quirks Mode.

You can read about it here: http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx

Keyword Values of the Font-size Property

The medium value of the font-size property matches the default normal font size.

The keyword values of this property include xx-small, x-small, small, medium, large, x-large, and xx-large. With earlier versions of Internet Explorer, these values are not defined intuitively. The medium value is not the default normal font size; small is the default.

Question 2

I don't know if it will help but you could try setting a relative measurement with EMS

you can use www.pxtoem.com to get and set your base font size to what you might need

then set your base font size on the html element like so html { font-size:1em; } /* 1em makes the font-size on all elements about 16px which is usually browser default */

then just either, set the font-size again on the elements you want to alter their size, but try to avoid nesting your EM Font sizes, IE avoid

<div class="parent" stlye="font-size: 1.5em;">
    <div class="child-nested" style="font-size: 1.8em;"><!-- try to avoid this -->
    </div>
</div>

set the font sizes preferably on your parent, so you know where you stand with nesting, and try to work out what content inside that container is going to be in font-size so you can battle this a bit better. REMS for resetting to the root font-size of your document aren't well supported enough yet really.

alternatively you could just increase font size by percentage, so 110%, 120% etc.

P.S { never put your styling inline with HTML, I've just done that for brevity }

hope this helps

Question 3

You might be better off using an exact font size in your CSS (15pt) instead of Large.

Here is a couple of links talking about forcing browser mode using doctype that might be helpful. Also if you are using ASP.NET you might want to look into setting Meta tag to force doc type in IE.

http://hsivonen.iki.fi/doctype/

http://www.quirksmode.org/css/quirksmode.html

Question 4

I would recommend selecting a CSS reset, there are several available around the web. This will set your base font as well as a common CSS starting point for your application. Eventually I would tell you to learn how to use scalable font sizes based on em and %. This is a little more advanced but you can get the experience to use them well if you give yourself a chance. Mostly it is an exercise of trial and error to finally get the confidence you need to master CSS.

Oh and I would also push you to get your organization to upgrade to IE 10 as soon as possible. So many great things will become available to you when you do that.