Menu
I've a problem with my very simple website. It seems that the font size unusually changes in some cases. For instance, when I click on a link in the homepage, the new page opened has a different font size. And it seems that this behavior happens only on Chrome. Please, see the pictures below. For each picture, on the left you can see the font size in the homepage and on the right you can see the font size in the page opened clicking on a link.
Internet Explorer (font size ok)
Firefox (font size ok)
Chrome (font size is DIFFERENT)
This is my CSS code used by the two web pages (before this there's a reset standard 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 homepage:
<!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!
826
Firstly, are you sure that the second page is at the same zoom level?
I would think that the problem is using % instead of em.
The first thing to do would be to determine if setting elements to em fixes the issue where the size changes on a new tab. After that, you can work out what em to set each element to.
*
{
font-size: 20em !important;
}
1- Font sizes in percentage are calculated based on a reference.
2- Font sizes are inherited.
In your case you have not defined a reference, so the browsers' default font sizes for the parent of those elements are the base for calculation.
Different browsers can have different default font sizes for the same element.
This is why you are seeing the difference.
You can set a font size on the body and then use percentages for anything else.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
