Geek asks and answers

Font Size Changes Unusually

I have a problem with my very simple site. It seems that in some cases the font size is unusually changing. For example, when I click the link on the main page, the new open page has a different font size. And it seems that this behavior only happens in Chrome. Please see the pictures below. For each image on the left, you can see the font size on the main page, and on the right you can see the font size on the open page by clicking on the link.

Internet Explorer (font size OK)

enter image description hereenter image description here

Firefox (font size ok)

enter image description hereenter image description here

Chrome (Font Size DIFFERENCES)

enter image description hereenter image description here

This is my CSS code used by two web pages (before this there is a standard reset file):

@charset "utf-8";
/* CSS Document */

body
{
    background-color:#FFF;
    font-size:100%;
    font-family:Verdana, Geneva, sans-serif;

}

.centered
{
    margin:0 auto;
}

.centered-content
{
    text-align:center;
}
div.article-header
{

    background-image:url(../img/articleheaderback.png);
    background-position:bottom;
    background-repeat:repeat-x;
    width:100%;
    margin-bottom:10px;


}
div.article-title
{
    width:69%;
    display:inline-block;
    padding-left:1%;
    padding-bottom:10px;
}
div.article-more
{
    text-align:right;
    font-style:italic;
    display:inline-block;
    color:#690000;
    width:29%;
    padding-right:1%;
}
div.article-content
{
    width:94%;
    padding-right:3%;
    padding-left:3%;
}
div.article
{
    padding-top:10px;
    padding-bottom:10px;
    padding-left:3%;
    padding-right:3%;
    width:94%;  
}
div.section
{
    padding-top:10px;
    padding-bottom:10px;
    width:100%;
    text-align:center;
}
div.section-title
{
    text-transform:uppercase;
    width:100%;
}
div.container
{
    width:100%;
    margin:10px 0;
    padding-top:20px;
    padding-bottom:10px;
    background-color:#cbcb63;
}
div.content
{
    width:90%;
    background-color:#fff59b;
    margin:15px auto;
    padding-top:10px;
    padding-bottom:10px;
}

div#contacts
{
    width:90%;
    background-color:#fff59b;
    margin:0 auto;
}
.dark-background
{
    background-color:#1b5e5e;
}
div.header
{
    text-align:center;
    width:100%;
}
div.footer
{
    text-align:center;
}
h1
{
    font-size:1.5em;
    font-weight:bold;
    color:#690000;
}


img#logo
{
    max-width:100%;
}

li.basic
{
    padding-top:5px;
    padding-bottom:5px;
    line-height:1.5;
}

li.nav
{
    color:#5c7304;
    padding-top:25px;
    text-align:center;
    font-weight:bold;
    text-transform:uppercase;
}
li.contacts
{
    display:inline-block;
    width:25%;
}
p
{
    line-height:1.5;
}
ul.nav
{
    margin-top:10px;
    padding:0;
    list-style:none;
    width:100%;
}
ul.basic
{
    list-style-type:disc;
    list-style-position:inside;
}
ul.contacts
{
    width:100%;
    margin-top:30px;
    margin-bottom:10px;
}

This is the html main page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<script src="js/jquery-1.9.1.min.js"></script>

<script language="javascript">
$(document).ready(function(){
    $("#section-list").hide();  

    $("#section-title").click(function(){
        $("#section-list").toggle();
    });
});
</script>

</head>

<body>
    <!-- container contains HEADER + NAV + CONTENT-->
    <div class="container">

        <!-- header -->
        <div class="header">
            <img id="logo" alt="Logo: Matteo Puccinelli profile" src="img/logoridim.png"> 
        </div>

        <!-- sections -->
        <div class="content">
            <!-- Article: sections -->
            <div class="section">
                <div id="section-title" class="section-title">
                    <h1>
                        Sections
                    </h1>
                </div>
                <div id="section-list">
                    <ul class="nav">
                        <li class="nav"><a href="prova.html">Home</a></li>
                        <li class="nav"><a href="#personaldata">Dati personali</a></li>
                        <li class="nav"><a href="#work">Esperienze lavorative</a></li>
                        <li class="nav"><a href="#education">Educazione</a></li>
                        <li class="nav"><a href="#passions">Passioni</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- content -->
        <div class="content">
            <!-- Article: personal data -->
            <div id="personaldata" class="article">
                <div class="article-header">
                    <div class="article-title">
                        <h1>
                            Dati personali
                        </h1>
                    </div>
                </div>
                <div class="article-content">
                    <ul class="basic">
                        <li class="basic">Data di nascita: 18-01-1987</li>
                        <li class="basic">Luogo di nascita: Lucca</li>
                        <li class="basic">Nazionalità: italiana</li>
                        <li class="basic">Residenza: [privata]</li>
                    </ul>
                </div>
            </div>

            <!-- Article: work experiences -->
            <div id="work" class="article">
                <div class="article-header">
                    <div class="article-title">
                        <h1>
                            Esperienze lavorative
                        </h1>
                    </div><!--
                 --><div class="article-more">
                        <a href="work.html">+ more</a>  
                    </div>
                </div>
                <div class="article-content">
                    <ul class="basic">
                        <li class="basic">(dal 2011) Redattore per il portale <a href="http://www.libro-mania.com/" target="_blank">Libro-Mania</a>.</li>
                        <li class="basic">(dal 2007) Lavori occasionali.</li>
                        <li class="basic">(2011-2012) Tirocinio formativo presso l'azienda <a href="http://www.intecs.it/" target="_blank">Intecs SpA</a>.</li>
                    </ul>
                </div>
            </div>

            <!-- Article: education -->
            <div id="education" class="article">
                <div class="article-header">
                    <div class="article-title">
                        <h1>
                            Educazione
                        </h1>
                    </div><!--
                 --><div class="article-more">
                        <a href="education.html">+ more</a> 
                    </div>
                </div>
                <div class="article-content">
                    <ul class="basic">
                        <li class="basic">(dal 2012) Laurea di secondo livello in Scienze Informatiche, facoltà di Scienze matematiche, fisiche e naturali di Pisa.</li>
                        <li class="basic">(2012) Laurea in Scienze Informatiche, facoltà di Scienze matematiche, fisiche e naturali di Pisa. Votazione 106/110.</li>
                        <li class="basic">(2007) Diploma di perito industriale capotecnico all'istituto industriale E. Fermi di Lucca con specializzazione Informatica. Votazione 100/100.</li>
                    </ul>
                </div>
            </div>

            <!-- Article: passions -->
            <div id="passions" class="article">
                <div class="article-header">
                    <div class="article-title">
                        <h1>
                            Passioni e Hobby
                        </h1>
                    </div><!--
                 --><div class="article-more">
                        <a href="passions.html">+ more</a>  
                    </div>
                </div>
                <div class="article-content">
                    <p>
                        prova
                    </p>
                </div>
            </div>

        </div> <!--content end -->
    </div> <!-- container end -->

    <!-- footer -->
    <div class="footer centered-content">
        <ul class="contacts">
            <li class="contacts"><img alt="facebook social icon" src="img/fbsmall.png"></li><!--
         --><li class="contacts"><img alt="twitter social icon" src="img/twittersmall.png"></li><!--
         --><li class="contacts"><img alt="feed RSS" src="img/rsssmall.png"></li><!--
         --><li class="contacts"><img alt="feed RSS" src="img/mail.png"></li>
        </ul>
        <p title="copyright" style="margin-top:15px; margin-bottom:15px;">
            Copyright 2013 Matteo Puccinelli
        </p>  
    </div>

</body>
</html>

Thank you in advance!

+5
3

-, , ?

, % em.

, , , em , . , .

*
{
    font-size: 20em !important;

}
+2

1 - .
2 - .

, .

.

.

, - .

+2

em and% are almost the same - 2em = 200%. Each browser has a default font size for most things that can be rewritten. Using * with! Important is a very rude way to do something because you will need to use it! It is important if you want to cancel something later.

What you ideally need to do is use:

html, body, table {
    font-size: 13px;
}

Alternatively, instead of using a space between you, you can do this:

.footer ul {
    font-size: 1px;
}
.footer li {
    font-size: 13px;
}

http://jsfiddle.net/hDLry/

+2
source

More articles:


All Articles