Supprimer les différences de hauteur de ligne entre FF et IE [Résolu]

Bonjour à tous !

Comment supprimer les différences de hauteur de ligne entre FF et IE6 ?

Je n'arrive pas à résoudre ce problème...

Merci pour cette réponse.

Serge
Modifié par Serge (07 Jun 2008 - 00:37)

Qu'appel tu hauteur de ligne ?

Les marges sur les balises p ?

Oui, j'ai essayé la propriété line-height mais le rendu n'est pas le même dans les deux navigateurs.

Une idée ?

Quelle sont les différences ?

Les espaces entre les lignes arrivent beaucoup plus grands sur IE6.
Modifié par Serge (05 Jun 2008 - 21:27)

Est-ce que cette différence de hauteur est dans entre les éléments d'un menu? Si oui, il s'agit de ce bug: http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-mise-en-forme-du-code-html

Il s'agit de mettre tes éléments l'un à la suite de l'autre

Merci à vous.

Non, c'est pour un paragraphe codé ainsi :

HTML : 

<div id="paragraphe">		
	<p>texte</p>
	<p>texte</p>
	<p>texte</p>
	<p>texte</p>
	<p>texte</p>
	<p>texte</p>
	<p>texte</p>
</div>

CSS sur SPIP 1.9.2.d		

/* taille typo
 * Base				100%
 * -------------------------------------
 * 20px				1.27em
 * 19px				1.21em
 * 18px				1.15em
 * 17px				1.09em
 * 16px				1.03em
 * 15px				0.96em
 * 14px				0.88em
 * 13px				0.82em
 * 12px				0.77em
 * 11px				0.71em
 * 10px				0.65em
 *  9px				0.59em
 * Attention : en dessous de 0.71em le texte devient illisible en text smallest sur MSIE */

.page_sommaire #paragraphe {
	font-family: Verdana, Tahoma, Arial, sans-serif; 
	text-align: center;
	margin-top: O;
	margin-left: 60px;
	font-size: 0.71em;
	line-height: 0.3;
}

-------------------------------------------------------------------------------------------------------------

Sinon, j'arrive au même rendu de line-height dans les 2 navigateurs et à un résultat qui me conviendrais... presque, mais avec le bidouillage d'utiliser les balises <h5> </h5> + l'obligation de changer de police :

HTML : 

<div id="paragraphe">		
	<h5>texte</h5>
	<h5>texte</h5>
	<h5>texte</h5>
	<h5>texte</h5>
	<h5>texte</h5>
	<h5>texte</h5>
	<h5>texte</h5>
</div>

.page_sommaire #paragraphe {
	font-family: Arial, Verdana, Lucida, Helvetica, sans-serif, "Lucida ";
	text-align: center;
	margin-top: O;
	margin-left: 60px;
	font-size: 0.71em;
	line-height: 0.01;
}

Quelqu'un connait la solution avec les balises <p> </p> ?

Serge
Modifié par Serge (06 Jun 2008 - 09:22)

Salut,

Voici un passage extrait du billet suivant sur le blog d'alsacreations.

a écrit :

Suppression de toutes les marges

Toutes les balises bloc (sauf <div>) possèdent des marges internes (padding) et externes (margin) par défaut.
Le problème est que cette valeur par défaut est différente d'un navigateur à l'autre et provoquera un rendu différent sur chaque navigateur.
Il s'agit certainement de l'explication la plus courante lorsque des décalages apparaissent entre les différentes plateformes.

Le meilleur moyen d'identifier un problème de marges sur certains éléments est de... supprimer toutes les marges de tous les éléments.

Bonne lecture.

hroiian

Edit : Rhoooo j'ai écrit quatre mots et je n'ai pas été foutu d'écrire sans faute. Merci Felipe pour la correction.
Modifié par hroiian (08 Jun 2008 - 23:51)

@hroiian :+1

@Serge :Tu peux utiliser l'outil Rendu par défaut des éléments HTML de Julien Royer pour observer ces différences d'affichage entre les navigateurs

Cdt,
Sylvain

Belle horreur que voici:

line-height: 0.01;

Donc si le texte fait 16px, la hauteur de ligne devrait être de... 0.16px?

Il faut:
1. utiliser une valeur décente de line-height (typiquement une valeur quelconque entre 1 et 2);
2. peut-être annuler ou diminuer les marges des paragraphes, si nécessaire.

Pour le deuxième point, je remarque que tu n'adresses aucun style aux paragraphes. Tu appliques des styles à leur conteneur, et certains (dont line-height) seront hérités, mais tu ne gères pas les marges des paragraphes par exemple.

Quant à l'utilisation d'une série d'éléments H5, c'est une autre belle horreur que l'on s'empressera d'oublier.

EDIT par Felipe: une autre horreur est de parler du blog d'alsacreation SSSS
Modifié par Felipe (06 Jun 2008 - 22:48)

Yeeeeesss !

HTML :
 
<div id="paragraphe">		
	<p>texte</p>
	<p>texte</p>
	<p>texte</p>
	<p>texte</p>
	<p>texte</p>
	<p>texte</p>
	<p>texte</p>
</div>

CSS sur SPIP 1.9.2.d		

/* -------------------------------------------
Disposition a l'ecran des blocs principaux
---------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	color: #BCE6FC;
	background: #76E064;
	font-size: 0.96em;	
        [b]line-height: 1.25;[/b]
	text-align: center; /*---- "text-align: center;" pour centrer dans IE ----*/
}

.page_sommaire #paragraphe {
	font-family: Verdana, Tahoma, Arial, sans-serif; 
	text-align: center;
	margin-top: O;
	margin-left: 60px;
}

.page_sommaire [b]#paragraphe p {[/b]
	[b]margin: 0;[/b]
	font-size: 0.77em;
}

Merci beaucoup Florent et vous touSSSS !

Serge
Modifié par Serge (07 Jun 2008 - 00:44)

Bonjour

line-height: entre 1 et 2
Je viens d'appliquer sur un cas yyyyyeeeeesssss

Quelques heures de crise en moins