Discussion :

[hellspawn_ludo]

Bonjour,

Je cherche à rendre la mise en page de mon texte identique pour les navigateurs Firefox et IE7, mais impossible, j'obtiens une différence à l'affichage.

Je pense que cela est du à un problème d'interligne mais je ne suis pas certain. Pourtant j'ai bien utilisé la propriété line-height dans ma balise P.

Ainsi, je fais fais appel à vos lumières afin que vous m'expliquiez pourquoi sous IE7 il y a 29 lignes visibles contre 28 pour Firefox ?

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
        /* ENCADREMENT PRINCIPAL : FILIGRANE 
        ------------------------------------*/
        #corps              {   position            :   relative;
				margin              :   auto; 
				padding             :   0px;
                                width               :   800px;      /* Largeur */
                                height              :   380px;      /* Hauteur */
                                top                 :   0px;        /* Positionnement haut */
                                background-color    :   black;      /* Couleur d'arrière-plan (pour maintenance) */
                            }
 
        /* BOITE DE LA PAGE
        -------------------*/
        #laPage             {   position            :   relative;
				top                 :   0px;		/* Important pour Firefox. Permet de positionner la page surle bord haut de #corps */
                                overflow            :   hidden;		/* Si le contenu de #laPage dépasse du height, on ne l'affiche pas. */
                                left                :   310px;
                                width               :   485px;            
                                height              :   380px;           
                                background-color    :   #C8D393;
                            }
 
 
 
       /* Texte balise P */
       #texte              {    position            :   relative;
				width               :   470px;
                                height              :   385px;              /* Important. Permet de ne pas voir le texte de la 2nd page */
				margin-top          :   0px;		    /* Important pour Firefox. Permet de positionner la page surle bord haut de #laPage */
				margin-left         :   9px;		    /* Marge extérieur gauche */
				padding-top         :   5px;		    /* Marge intérieur haut */
                                font-family         :   Century Gothic;     /* Police */
                                font-size           :   10pt;               /* Taille police */
                                text-align          :   justify;            /* Alignement */
                                line-height         :   1.00em;             /* Interligne */
                                color               :   black;              /* Couleur du texte */
                                background-color    :   red;
                            }

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
    <div id="corps">
 
        <div id="laPage">
            <p id="texte">
                ligne 1 <br />
                ligne 2 <br />
                ligne  3 <br />
                ligne  4 <br />
                ligne  5 <br />
                ligne  6 <br />
                ligne  7 <br />
                ligne  8 <br />
                ligne  9 <br />
                ligne  10 <br />
                ligne  11 <br />
                ligne  12 <br />
                ligne  13 <br />
                ligne  14 <br />
                ligne  15 <br />
                ligne  16 <br />
                ligne  17 <br />
                ligne  18 <br />
                ligne  19 <br />
                ligne  20 <br />
                ligne  21 <br />
                ligne  22 <br />
                ligne  23 <br />
                ligne  24 <br />
                ligne  25 <br />
                ligne  26 <br />
                ligne  27 <br />
                ligne  28 <br />
                ligne  29 <br />
                ligne  30 <br />
            </p>
        </div>  <!-- fin laPage --> 
 
    </div>  <!-- fin corps -->

Merci beaucoup.

[Bisûnûrs]

C'est ton line-height en em qui pose problème. Comme c'est ta seule valeur en em, pourquoi ne pas la mettre en px qui résoudrait ton problème ?

[hellspawn_ludo]

Je n'y avais pas pensé. Décidément, ou ai-je la tête ?

Je m'en souviendrais à l'avenir, toujours utiliser les mêmes unités de mesure.

Merci, merci...