Différence superposition images entre IE et FF [Fait]

**SheikYerbouti** · 23/10/2008, 09h32

Bonjour,
je souhaite superposer 2 images (genre ajout d'un sticker média player)Voici le code que j'utilise:

Code html :

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

1
2
3
4
5
6
<a href="..."><IMG SRC="image1.gif" height="260" border="0"></a>
<SPAN style="position: relative; top: -170 px; left: xx px;">
 <a href="...">
 <img src="image2.gif" border="0" width="80" height="80">
 </a>
</SPAN>

Ce code supperpose bien les 2 images avec IE mais pas du tout avec Firefox.

Une idée ?

**Bisûnûrs** · 23/10/2008, 09h46

Utilises-tu un DOCTYPE ? Si oui lequel ? Si non il faudrait.

**SheikYerbouti** · 23/10/2008, 09h54

Non, ce code est directement dans le corps du HTML.

**Bisûnûrs** · 23/10/2008, 10h05

Mais tout en haut de ton document HTML, est-ce que tu as un DOCTYPE ?
Cf : http://xhtml.developpez.com/faq/?pag...#html_doctypes

**SheikYerbouti** · 23/10/2008, 10h24

Le problème est que ce code est généré dans une JSP et le nom de l'image est donné dynamiquement. Rien en dur, donc.
Cela n'explique pas, en tous cas, pourtant cette différence entre les 2 navigateurs.

**Bisûnûrs** · 23/10/2008, 11h53

Hum ... Désolé d'insister, mais la différence d'affichage peut justement provenir de la présence ou non d'un DOCTYPE en début de ton document.

Ton code JSP génère du code HTML, qui sera lu par ton navigateur. Donc c'est ce code HTML qu'il faut étudier. En affichant la source de ce code HTML une fois la page JSP générée, est-ce que tout en haut tu as un DOCTYPE ? Vois ta page comme un tout, sans te dire que ce n'est que la petite partie dynamique générée sur laquelle tu travailles qui est en cause.

Si tu n'es pas sûr, tu peux nous poster l'ensemble de ton code HTML une fois généré par ton JSP.

**SheikYerbouti** · 23/10/2008, 11h55

Non, il n'y a aucun DOCTYPE

**Bisûnûrs** · 23/10/2008, 12h02

Il faut que tu en rajoutes un alors.

Tu peux aussi essayer de superposer de cette manière :

http://www.developpez.net/forums/m1487889-2/

**SheikYerbouti** · 23/10/2008, 12h11

Envoyé par Bisûnûrs

Il faut que tu en rajoutes un alors.

Pardon d'avoir l'air idiot, mais que dois-je ajouter exactement ?

**Bisûnûrs** · 23/10/2008, 12h15

Il faut que tu rajoutes cette ligne par exemple :

Code html :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

tout en haut de ton document HTML. Il faut que ce soir la première instruction lue par le navigateur.

**SheikYerbouti** · 23/10/2008, 13h09

Dans ce cas les images ne sont plus superposées. La seconde se trouve à droite de la première.

**Bisûnûrs** · 23/10/2008, 14h12

As-tu essayé comme ça :

Code html :

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

1
2
3
4
<div id="superposition">
  <a href="..." id="img_dessous"><img src="image1.gif" height="260" border="0"></a>
  <a href="..." id="img_dessus"><img src="image2.gif" border="0" width="80" height="80"></a>
</div>

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
#superposition {
  position: relative;
}
 
#superposition a {
  position: absolute;
  top: 0;
  left: 0;
}
 
#img_dessous{
  z-index: 1;
}
 
#img_dessus{
  z-index: 2;
}

Différence superposition images entre IE et FF [Fait]

CSS

Discussions similaires

Partager

Partager