Bonjour,

J'expose mon problème du jour :
La taille de police entre IE et firefox est différente :

upload/26120-Sanstitre-.jpg

Voici mon code CSS:



#titrepage {
	color: white;
	font-size: 3em;
	font-family:monospace, "Times New Roman", Times, serif;
	width:	400px;
	margin-left: 530px;
	margin-top: 280px;
}

Modifié par geopl (28 Jan 2010 - 08:18)
Bonjour,

Pour ce genre de problème, il faut voir la page en entier pour se faire une idée.

Serait-il possible que sur l'un des deux navigateur, le zoom soit actif ?
Avec IE :

upload/26120-Sanstitre.jpg

Avec Firefox :

upload/26120-Sanstitre2.jpg

Le titre présentation fait parti d'un bloc que j'ai déplacé avec margin-left et right.

Voici le code HTML :


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Présentation</title>
<link rel="stylesheet" type="text/css" href="accueil.css"/>
</head>



<body>
<div id="titrepage">
<h1>Présentation</h1>
</div> <!-- Titre de page -->

<div id="menu">
<ul>
	<li class="en-cours">Présentation</li>
    <li>Machin</li>
    <li>Truc</li>
</ul>
</div> <!-- menu -->


<div>
<p>Blablablabla..</p>
</div> <!-- contenu -->



</body>
</html>



Et le code CSS :


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

html {
	font-size:100%;	
}
body {
	margin: 0;
	background: url("planete.png");
	
	
	
}

#titrepage {
	color: white;
	font-size: 3em;
	font-family:monospace, "Times New Roman", Times, serif;
	width:	400px;
	margin-left: 530px;
	margin-top: 280px;
}
#menu {
	float:left;
}



Sur la premiere image là je vois que sur votre site ce n'est pas l'image que j'ai ajouté... J'espere que vous avez la bonne . C'est la même que sur firefox mais "présentation" est écrit en plus petit.
Modifié par geopl (27 Jan 2010 - 10:55)
Ba non pourtant dans mon navigateur firefox j'ai met zoom"normal" mais ça change rien.

Pour google chrome la taille de police est la même que Firefox. C'est peut-être un bug d' IE ?
Modifié par geopl (27 Jan 2010 - 11:57)
Bonjour,

revoit le font-size:100%. Met le fixe, ça ne sert pas à grand chose une police qui s'adapte à la taille de l'écran...
Salut,

les tailles en "em" génèrent des tailles "multiples" de la taille de leur élément parent.

Je ne comprends pas bien le comportement dans IE (le DOM devrait pourtant être le même) mais pour corriger cela il suffit de fixer la taille de l'élément H1 et pas de sont élément parent (qui me semble d'ailleurs totalement inutile dans ton code) :
h1 { 
    color: white; 
    font-size: 3em; 
    font-family: monospace, "Times New Roman", Times, serif; 
    width: 400px; 
    margin-left: 530px; 
    margin-top: 280px; 
} 

Modifié par Heyoan (27 Jan 2010 - 12:31)
masseuro a écrit :
Bonjour,

revoit le font-size:100%. Met le fixe, ça ne sert pas à grand chose une police qui s'adapte à la taille de l'écran...
Ce font-size:100% sert justement à éviter un bug de redimensionnement dans IE. Smiley cligne
Ok nickel ça marche.

Donc le problème c'est que j' avais attribué les propriété à l' ID du <div> et non pas directement au H1 ?

Pour le font-size 100% sur le HTML c'est utile de le laisser ? Parceque je l'ai enlevé et ça fonctionne quand même.
Je l' avais mis en croyant que ça reglerais les problèmes de font-size.
masseuro a écrit :
revoit le font-size:100%. Met le fixe, ça ne sert pas à grand chose une police qui s'adapte à la taille de l'écran...

Et la valeur 100% n'a ici strictement rien à voir avec la taille de l'écran (taille que le navigateur ignore, en passant Smiley cligne ), ou avec la taille du viewport.
Heyoan a écrit :
les tailles en "em" génèrent des tailles "multiples" de la taille de leur élément parent.

Ben en fait ça dépend de quel type de «taille» on parle.
Pour font-size, ça génère une taille de texte multiple de la taille du texte de l'élément parent, en effet.