Discussion :

[novice100]

Bonjour,
J'ai créé une div dans laquelle j'ai mis une image de fond, un titre et un texte.
Mon problème est que sous IE, le titre (h2) est légèrement décalé vers le haut alors que sous Firefox, il est bien au centre.
Si je décale pour bien l'afficher sous IE grâce aux margin-top, c'est Firefox qui va être "trop bas".
J'ai également essayé de mettre "display: block" un peu partout, mais rien n'a changé.
Quelqu'un aurait-il une idée pour que l'affichage soit identique chez les 2 navigateurs ?

Voici mes codes et mon CSS :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
   <div id="sidemain2">
   <div class="imagedossier">
   <img src="test_rose.gif" width="260" height="200" border="0" >
   </div>
   <div class="textedossier">
   <h2>PRESENTATION</h2>
   <p><img class="image" src="test_bleu.gif" width="40" height="40" border="0" >Praesent aliquam, erat nulla fermentum diam, at nonummy quam  ante ac quam.
   Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula.</p>
   <img class="bouton"src="bouton4.gif" width="95" height="20" border="0" >
   </div>
</div>

Code css :

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
 
#sidemain2 {
                float: left;
                height: 200px;
                width: 46%;
                color: #036;
                text-align: center;
                background-repeat: no-repeat;
                background-position: center;
                margin : 5px;
                padding: 5px;
                border: 1px solid #090;
}
.image{
                float: left;
                margin: 3px 6px 2px 2px;
}
.bouton{
                float: right;
}
.imagedossier {
                position: absolute;
                width: 240px;
                z-index: 1;
}
.textedossier {
                position:relative;
                margin-top: -10px;
                margin-left: 5px;
                width: 250px;
                height: 220px;
                z-index: 2;
                color: #000;     
}

[copin]

Salut,

Si je me souviens bien, Firefox et Internet explorer n'interprete pas de la meme facon le padding margin.

Et comme tu utilises les deux dans chacune de tes class, tu te compliques beaucoup la tache.

Un conseil qu'on peut te donner et de reprendre le code de la css en supprimant tous les padding et margin et de mettre en forme tes paddings margin étape par étape en vérifiant à chaque itération dans chaque navigateur pour localiser ton probleme. Ca te permettra en meme temps de faire un peu le ménage dans la css.

De plus tu utilises pour fixer tes tailles des valeurs en % et en px. Uniformise la css en utilisant toujours l'un ou toujours l'autre pour te faciliter la tache.