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; }
Partager