CODEWITHSUNDEEP
cssfonts
FKEinternet
FKEinternet

Reputation: 1060

Font size larger than set in CSS

When I set the font size to a specific pixel height, the computed font size is 1.333 times the size I've set in my CSS. However, if I set the font size as a percentage, the correct size is used. This happens in every browser that I've tried, including Firefox 3.6.28, Firefox 53.0.3 (both 32- and 64-bit), Internet Exploiter, Safari, Chrome and Opera.

Here is a whittled-down example of the problem:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>TocMenu Test</title>
    <link href="/style/styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body
        {   background:#000000 url('/graphics/l5-back-eso1213a-2K.jpg') repeat fixed;
            color:#ffffe8;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:14px;
            font-weight:normal;
        }
        img
        {   border:0;
            margin:0;
            padding:0;
        }
        #menuRoot *
        {   min-width:0;/* peek-a-boo bug fix for IE7 */
            position:relative;/* peek-a-boo bug fix for IE6 */
        }
        #menuRoot img
        {   padding:3px;
        }
        .tocRoot
        {   padding:0;
        }
        .tocLevel1
        {   font-size:16.8pt;    /* 120% */
            font-weight:bold;
            margin-top:9px;
        }
        .tocLevel2
        {   font-size:15.4pt;    /* 110% */
            font-weight:bold;
            margin-top:6px;
        }
        .tocMenuOpen
        {   background:none;
            color:#ffff66;
            list-style:none;
        }
        .tocMenu1
        {   padding-left:30px;
        }
        .tocLink, a.tocLink
        {   color:#99ff99;
            text-decoration:none;
        }
        .tocBtn, .tocBtnNot
        {   display:inline-block;
            text-align:left;
            vertical-align:text-top;
            width:14px;
        }
    </style>
</head>
<body>
<ul id="menuRoot" class="tocMenuOpen tocRoot">
    <li>
        <p class="glueDown">
            <span class="tocBtn" id="menuHome_bn"><img src="/graphics/imgOpen.gif" alt="menu state indicator" /></span>
            <a href="//L5Development.com" class="tocLevel1 tocLink" title="The L5 Development Group - A For-Profit Private Enterprise Space Exploration and Development Program">Home</a>
        </p>
        <ul id="menuHome" class="tocMenuOpen tocMenu1">
            <li>
                <p class="glueDown">
                    <span class="tocBtnNot">&nbsp;</span>
                    <a href="/TodaysNews.php" class="tocLevel2 tocLink" title="News about The L5 Development Group, space travel, space business, and related issues">Today's&nbsp;News</a>
                </p>
            </li>
        </ul>
    </li>
</ul>
</body></html>

If I change the tocLevel1 and tocLevel2 font-size values from their pixel heights to the percentage values shown ih the CSS comments, the page works correctly.

Why does every browser decide to use a font size one third larger than what is set in the CSS when the font-size value is set to a specific height?

Upvotes: 1

Views: 2021

Answers (1)

Tim Fountain
Tim Fountain

Reputation: 33148

You're mixing px (pixels) and pt (points) in your font sizes. 120% of 14px would be 16.8px, but you've specified the units as points, which are not the same thing, and are larger.

I'd suggest sticking to one unit to make it easier to adjust things relatively. (Or use an absolute measurement as your base size and use relative ones for everything else.)

Upvotes: 1

Related Questions