Encore font-size et les naviguateurs !!!

Bonjour à tous,

Me voilà face à un problème crucial, rébarbatif et bien connu !
J'ai beau avoir passer des heures avec mon ami google, rien n'y fait.
Je n'ai trouvé aucune solution efficace.
C'est le fameux et réputé font-size qui se comporte différemment
avec d'une part IE et d'autre part avec firefox et enfin avec chrome !!!
J'ai 3 résultats différents !
Pouvez-vous m'aider ?
D'avance un immense merci.

Voici les endroits cruciaux :
1- boutons dans le menu supérieur
2- textes dans les 3 pavés inférieurs

Voici les CSS

* {
	margin: 0;
	padding: 0;
	font-family:Verdana, Geneva, sans-serif;
}
body {
	background-color: #adbe44;
	font-size: 100%;
}
.bouton1 {
	display: inline-block;
	float: left;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	font-size: 60%;
	line-height: 12px;
	height: 24px;
	padding-top: 10px;
}
.bouton2 {
	display: inline-block;
	float: left;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	font-size: 60%;
	line-height: 12px;
	height: 29px;
	padding-top: 5px;
	text-align: center;
}
.bouton_blanc {
	background-image: url(../images/general/bouton_blanc.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	color: #000000;
}
.bouton_noir {
	background-image: url(../images/general/bouton_noir.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	color: #FFFFFF;
}
.entrebouton {
	display:inline-block;
	float:left;
	background-image: url(../images/general/entrebouton.gif);
	background-position: 12px 0px;
	width: 24px;
	height: 34px;
	background-repeat: no-repeat;
}

Voici maintenant le HTML

<div id="menu">
    <div class="bouton1 bouton_noir" style="width:20px;"></div>
    <div class="entrebouton"></div>
    <div class="bouton1 bouton_blanc"><a href="index.php" class="noir">ACCUEIL</a></div>
    <div class="entrebouton"></div>
    <div class="bouton2 bouton_noir"><a href="bioperformance.php" class="blanc">BIO<br/>PERFORMANCE</a></div>
    <div class="entrebouton"></div>
    <div class="bouton1 bouton_noir"><a href="degraissetou.php" class="blanc">D&Eacute;GRAISSETOU</a></div>
    <div class="entrebouton"></div>
    <div class="bouton1 bouton_noir"><a href="grsystem.php" class="blanc">GR SYSTEM</a></div>
    <div class="entrebouton"></div>
    <div class="bouton2 bouton_noir"><a href="biodegraissant.php" class="blanc">BIO<br/>D&Eacute;GRAISSANT</a></div>
    <div class="entrebouton"></div>
    <div class="bouton2 bouton_noir"><a href="biobacgraisse.php" class="blanc">BIO<br/>BAC &Agrave; GRAISSE</a></div>
    <div class="entrebouton"></div>
    <div class="bouton2 bouton_noir"><a href="traitementodeurs.php" class="blanc">TRAITEMENT<br/>DES ODEURS</a></div>
    <div class="entrebouton"></div>
    <div class="bouton1 bouton_noir"><a href="contact.php" class="blanc">CONTACT</a></div>
    <div class="entrebouton"></div>
    <div class="bouton1 bouton_noir"><a href="infoslegales.php" class="blanc">INFOS L&Eacute;GALES</a></div>
    <div class="entrebouton"></div>
</div>

Modifié par jytest (08 Nov 2011 - 11:14)

Hello,
Je n'ai pas de soucis "flagrants" de font-size chez moi:
FF7,Chrome15,IE7 et 8.

Je n'y comprends rien.

Mon code est en HTML5.
En étant zoom 100%, j'ai bien de mon côté des résultats différents entre IE et chrome !
Pourquoi ?
Peux-tu réessayer et
vérifier les différences par exemple au niveau du menu horizontal en partie supérieure de la page ?

J'ai essayé :
* HTML {font-size: 120%;}
et aussi
_font-size: 120%
Mais cela non plus, cela ne va pas !!!

D'avance merci.

J'ai même essayé avec
!important

Là non plus, c'est le bins !

bonjour,

ces difference proviennent en parties de la config de ton navigateur , en tout cas pour la "taille du texte".
Ton font-size se base sur la taille par defaut choisi du navigateur.
Tu ne peut donc pas maitrisé cette taille chez le visiteur.

Pour un rendu de taille similaire tu peut faire pour body par exemple : font-size avec une valeur en pixel, puis exprimé les valeurs des autres elements en "em" ou "%".

Cordialement,
GC

Je n'ai pas de différence.
As-tu des captures d'écran à nous montrer?

Voilà les 2 captures en pj



Chez moi, c'est flagrant !
Et pas chez toi, pourquoi ?
Modifié par jytest (07 Nov 2011 - 12:18)

pour répondre à gc-nomade.
Cela ne fonctionne pas mieux !

Bonjour,

Je vois juste une différence de lissage, ce qui est propre à la config de ton ordi et de ton navigateur.

Il faut faire avec.

Les 4 pc de la maison ont exactement les resultats
comme presents dans les 2 captures d'ecran.
Bizarre !!! Pourquoi vous n'avez pas ces resultats ?
D'autres ont-ils le même mauvais rendu que moi ?
Modifié par jytest (07 Nov 2011 - 13:29)

Comme le dis Laurie-Anne, c'est un différence du lissage de la typo selon le navigateur et le système. L'inter-lettrage peut lui aussi être différent selon le navigateur il me semble.

Du coup, j'imagine que ce qui t'embête le plus, c'est pas la taille de la typo mais le fait que ça explose ta mise en page.. Le problème vient de ton menu complètement rigide, au moindre décalage, c'est foutu. Suis ce tuto, tu devrais avoir quelque chose de plus flexible !

Passons le problème du menu.
Je vais "photoshoper" les boutons !


mais pour les 3 blocs juxtaposés en partie basse ?
Surtout le 1er bloc à gauche ?
Modifié par jytest (07 Nov 2011 - 16:12)

jytest a écrit :
Mon code est en HTML5.

Avec par ailleurs un cas de divite aigüe.
Il aurait été pas mal d'utiliser des éléments HTML un peu plus significatifs que DIV DIV DIV DIV DIV. Mais j'imagine que tu débutes et que ça viendra par la suite dans ton apprentissage de HTML (mot clé qui va bien: «code HTML sémantique»).

mob a écrit :
L'inter-lettrage peut lui aussi être différent selon le navigateur il me semble.

Non. Les spécificités du mécanisme de rendu des différents navigateurs et systèmes d'exploitation et versions des systèmes d'exploitation peuvent provoquer de légères différences dans l'interlettrage perçu, mais l'interlettrage spécifié en CSS (letter-spacing) reste le même.

jytest a écrit :
Passons le problème du menu.
Je vais "photoshoper" les boutons !

Si tu utilises des images, pense à utiliser des attributs alt qui vont bien dans ton code HTML.

jytest a écrit :
mais pour les 3 blocs juxtaposés en partie basse ?
Surtout le 1er bloc à gauche ?

On n'a pas le code HTML et CSS pour ces éléments, juste des captures d'écran. Dans l'idéal, tu devrais fournir une page en ligne (ce qui donne comme par magie accès au code HTML et CSS qui va bien, et permet de faire des tests avec des outils tels que Firebug ou Web Inspector).

En réponse à fvsch, voici toutes les infos ci-dessous.
Peux-tu y jeter un oeil ?
Merci d'avance.


Voici le lien
www.creaprint.be/hygiadiffusion/index.php

Voici le html modifié :

<div id="menu">
	<ul class="menu">
    <li class="bouton1 bouton_noir" style="width:29px;"></li>
    <img src="images/general/entrebouton.gif" class="entrebouton">
    <li class="bouton1 bouton_blanc" style="width:66px;"><a href="index.php" class="noir">ACCUEIL</a></li>
    <img src="images/general/entrebouton.gif" class="entrebouton">
    <li class="bouton2 bouton_noir" style="width:117px;"><a href="bioperformance.php" class="blanc">BIO<br/>PERFORMANCE</a></li>
    <img src="images/general/entrebouton.gif" class="entrebouton">
    <li class="bouton1 bouton_noir" style="width:114px;"><a href="degraissetou.php" class="blanc">D&Eacute;GRAISSETOU</a></li>
    <img src="images/general/entrebouton.gif" class="entrebouton">
    <li class="bouton1 bouton_noir" style="width:84px;"><a href="grsystem.php" class="blanc">GR SYSTEM</a></li>
    <img src="images/general/entrebouton.gif" class="entrebouton">
    <li class="bouton2 bouton_noir" style="width:101px;"><a href="biodegraissant.php" class="blanc">BIO<br/>D&Eacute;GRAISSANT</a></li>
    <img src="images/general/entrebouton.gif" class="entrebouton">
    <li class="bouton2 bouton_noir" style="width:106px;"><a href="biobacgraisse.php" class="blanc">BIO<br/>BAC &Agrave; GRAISSE</a></li>
    <img src="images/general/entrebouton.gif" class="entrebouton">
    <li class="bouton2 bouton_noir" style="width:95px;"><a href="traitementodeurs.php" class="blanc">TRAITEMENT<br/>DES ODEURS</a></li>
    <img src="images/general/entrebouton.gif" class="entrebouton">
    <li class="bouton1 bouton_noir" style="width:80px;"><a href="contact.php" class="blanc">CONTACT</a></li>
    <img src="images/general/entrebouton.gif" class="entrebouton">
    <li class="bouton1 bouton_noir" style="width:105px;"><a href="infoslegales.php" class="blanc">INFOS L&Eacute;GALES</a></li>
    <li class="bouton1 bouton_noir" style="width:30px;"></li>
    </ul>
</div>

Voici les css :

...
#menu {
	height: 34px;
	width: 945px;
	background-image: url(../images/general/barre-menus.jpg);
}
#menu a{
	text-decoration: none;
}
#menu a:hover{
	color: #adbc44;
}
...
.menu {
	margin: 0px;
	padding: 0px;
	
}
.bouton1 {
	display: inline-block;
	float: left;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	height: 24px;
	padding-top: 10px;
	text-align: center;
	font-size: 9px;
	line-height: 12px;
}
.bouton2 {
	display: inline-block;
	float: left;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	height: 29px;
	padding-top: 5px;
	text-align: center;
	font-size: 9px;
	line-height: 12px;
}
.bouton_blanc {
	background-image: url(../images/general/bouton_blanc.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	color: #000000;
}
.bouton_noir {
	background-image: url(../images/general/bouton_noir.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	color: #FFFFFF;
}
.entrebouton {
	display: inline-block;
	float :left;
	width: 2px;
	height: 34px;
}
...

Modifié par jytest (08 Nov 2011 - 19:10)

Hmm, je n'ai pas de souci d'affichage particulier dans Firefox, Opera et Chrome. Pas testé sous IE que je n'ai pas sous la main.

Quelques remarques:
- La structure du menu en UL/LI c'est pas mal, par contre les éléments IMG entre les LI non seulement c'est invalide (de manière très logique, un UL ne peut contenir que des LI), et d'autre part ça ne me semble pas nécessaire. Tu dois pouvoir placer ces traits de séparation en image de fond de tes LI, par exemple.
- Je ne comprends pas pourquoi tu as trois éléments IMG pour constituer le fond de #photo. Vu qu'il s'agit d'un fond, il devrait être en background CSS et pas dans le code HTML (surtout pas découpé en trois morceaux avec chacun un texte alternatif qui dit «photo», de sorte que le contenu textuel de ton élément devient «photo photo photo» ce qui n'est pas très pertinent).

fvsch a écrit :

Non. Les spécificités du mécanisme de rendu des différents navigateurs et systèmes d'exploitation et versions des systèmes d'exploitation peuvent provoquer de légères différences dans l'interlettrage perçu, mais l'interlettrage spécifié en CSS (letter-spacing) reste le même.

C'est ce que j'entendais par la différence d'inter-lettrage. Ca manquais de précision

jytest a écrit :

Voici le lien
www.creaprint.be/hygiadiffusion/index.php

Pas de problème d'affichage pour moi non plus. IE inclue.
Modifié par mob (09 Nov 2011 - 10:13)

Suite aux conseils avisés de fvsch,voici les bouts de codes corrigés !
De ce fait, plus de problèmes de compatibilité du menu dans ie et les autres !

Par contre, au niveau des blocs "Nos objectifs" et "Lauréat", il y a toujours une différence d'affichage entre ie et les autres ! Les affichages justify sont très différents !

voici le html :

<div id="menu">
    <ul class="menu">
    <li class="bouton1 bouton_focus" style="width:66px; margin-left:31px;" alt="Accueil"><a href="index.php" class="noir">ACCUEIL</a></li>
    <li class="bouton2" style="width:117px; margin-left:2px;" alt="Bio_Performance"><a href="bioperformance.php" class="blanc">BIO<br/>PERFORMANCE</a></li>
    <li class="bouton1" style="width:114px; margin-left:2px;" alt="Degraissetou"><a href="degraissetou.php" class="blanc">D&Eacute;GRAISSETOU</a></li>
    <li class="bouton1" style="width:84px; margin-left:2px;" alt="GR_System"><a href="grsystem.php" class="blanc">GR SYSTEM</a></li>
    <li class="bouton2" style="width:101px; margin-left:2px;" alt="Bio_Dégraissant"><a href="biodegraissant.php" class="blanc">BIO<br/>D&Eacute;GRAISSANT</a></li>
    <li class="bouton2" style="width:106px; margin-left:2px;" alt="Bio_Bac_graisse"><a href="biobacgraisse.php" class="blanc">BIO<br/>BAC &Agrave; GRAISSE</a></li>
    <li class="bouton2" style="width:95px; margin-left:2px;" alt="Traitement des odeurs"><a href="traitementodeurs.php" class="blanc">TRAITEMENT<br/>DES ODEURS</a></li>
    <li class="bouton1" style="width:80px; margin-left:2px;" alt="Contact"><a href="contact.php" class="blanc">CONTACT</a></li>
    <li class="bouton1" style="width:105px; margin-left:2px;" alt="Infos_légales"><a href="infoslegales.php" class="blanc">INFOS L&Eacute;GALES</a></li>
    </ul>
</div>

Voici les css :

#menu {
	height: 34px;
	width: 945px;
	background-image: url(../images/general/barre-menus.jpg);
}
#menu a{
	text-decoration: none;
}
#menu a:hover{
	color: #adbc44;
}

.menu {
	margin: 0px;
	padding: 0px;
	
}
.bouton1 {
	display: inline-block;
	float: left;
	height: 24px;
	padding-top: 10px;
	text-align: center;
	font-size: 9px;
	line-height: 12px;
}
.bouton2 {
	display: inline-block;
	float: left;
	height: 29px;
	padding-top: 5px;
	text-align: center;
	font-size: 9px;
	line-height: 12px;
}
.bouton_focus {
	background-image: url(../images/general/bouton_blanc.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	color: #000000;
}

Modifié par jytest (09 Nov 2011 - 11:49)