Discussion :

[Nyphel]

Bonsoir,

J'ai un petit soucis d'affichage de <DIV>.
Pour mieux comprendre, voici sans plus tarder la page web en question :
http://location.btz.free.fr/

Sur la gauche on peut voir un menu composé de 10 étiquettes.
Ces étiquettes sont des images au format PNG avec fond transparent.
Chacune d'entre elle est disposée dans une <DIV>, et chacune de ces <DIV> est alors positionnée via du CSS.

Mon soucis est que la représentation diffère entre Microsoft Internet Explorer 7 et Mozilla Firefox 2, et ce de manière conséquente : le fond transparent de l'image devient visible sous Microsoft Internet Explorer, et il prend une couleur bleutée !

Voici le rendu (correct) sous Mozilla Firefox 2 :


Voici le rendu (incorrect) sous Microsoft Internet Explorer 7 :


Déclaration des <DIV> :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="div_accueil">       <a href="index.html">       <img src="images/menu/etiquette_accueil.png"/>      </a></div>                   
<div id="div_cuisine">       <a href="cuisine.html">     <img src="images/menu/etiquette_cuisine.png"/>      </a></div>                   
<div id="div_salon">         <a href="salon.html">       <img src="images/menu/etiquette_salon.png"/>        </a></div>                   
<div id="div_chambres">      <a href="chambres.html">    <img src="images/menu/etiquette_chambres.png"/>     </a></div>                   
<div id="div_salle_eau">     <a href="salles_eau.html">  <img src="images/menu/etiquette_salle_eau.png"/>    </a></div>                   
<div id="div_calendrier">    <a href="calendrier.php">   <img src="images/menu/etiquette_calendrier.png"/>   </a></div>                   
<div id="div_tarifs">        <a href="tarifs.html">      <img src="images/menu/etiquette_tarifs.png"/>       </a></div>                   
<div id="div_carte">         <a href="carte.html">       <img src="images/menu/etiquette_carte.png"/>        </a></div>                   
<div id="div_contacts">      <a href="contacts.html">    <img src="images/menu/etiquette_contacts.png"/>     </a></div>                   
<div id="div_partenaires">   <a href="partenaires.html"> <img src="images/menu/etiquette_partenaires.png"/>  </a></div>

Les images en question sont disponibles dans le répertoire suivant :
http://location.btz.free.fr/images/menu/

Voici le code CSS qui permet le positionnement des <DIV>, ainsi que les divers effets :
(pas de bordure sur les images, agrandissement de l'image au survol de la souris, positionnement de la div au premier plan au survol de la souris)

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
#div_accueil {
	position:absolute;
	left:26px;
	top:0px;
	width:119px;
	height:75px;
	z-index:1;
}
#div_accueil:hover {z-index:5;}
#div_accueil img {border: 0px;}
#div_accueil img:hover {height:100px;}
 
#div_cuisine {
	position:absolute;
	left:2px;
	top:102px;
	width:111px;
	height:77px;
	z-index:1;
}
#div_cuisine:hover {z-index:5;}
#div_cuisine img {border: 0px;}
#div_cuisine img:hover {height:100px;}
 
#div_salon {
	position:absolute;
	left:82px;
	top:126px;
	width:110px;
	height:80px;
	z-index:2;
}
#div_salon:hover {z-index:5;}
#div_salon img {border: 0px;}
#div_salon img:hover {height:100px;}
 
#div_chambres {
	position:absolute;
	left:12px;
	top:167px;
	width:111px;
	height:79px;
	z-index:3;
}
#div_chambres:hover {z-index:5;}
#div_chambres img {border: 0px;}
#div_chambres img:hover {height:100px;}
 
#div_salle_eau {
	position:absolute;
	left:92px;
	top:192px;
	width:99px;
	height:76px;
	z-index:4;
}
#div_salle_eau:hover {z-index:5;}
#div_salle_eau img {border: 0px;}
#div_salle_eau img:hover {height:100px;}
 
#div_calendrier {
	position:absolute;
	left:2px;
	top:288px;
	width:110px;
	height:80px;
	z-index:1;
}
#div_calendrier:hover {z-index:5;}
#div_calendrier img {border: 0px;}
#div_calendrier img:hover {height:100px;}
 
#div_tarifs {
	position:absolute;
	left:15px;
	top:343px;
	width:113px;
	height:82px;
	z-index:3;
}
#div_tarifs:hover {z-index:5;}
#div_tarifs img {border: 0px;}
#div_tarifs img:hover {height:100px;}
 
#div_carte {
	position:absolute;
	left:92px;
	top:289px;
	width:88px;
	height:81px;
	z-index:2;
}
#div_carte:hover {z-index:5;}
#div_carte img {border: 0px;}
#div_carte img:hover {height:100px;}
 
#div_contacts {
	position:absolute;
	left:92px;
	top:361px;
	width:85px;
	height:76px;
	z-index:4;
}
#div_contacts:hover {z-index:5;}
#div_contacts img {border: 0px;}
#div_contacts img:hover {height:100px;}
 
#div_partenaires {
	position:absolute;
	width:107px;
	height:81px;
	z-index:1;
	left: 27px;
	top: 483px;
}
#div_partenaires:hover {z-index:5;}
#div_partenaires img {border: 0px;}
#div_partenaires img:hover {height:100px;}

Pourriez-vous m'aider, s'il vous plait ?

[Nyphel]

Mhhhh...
En fait il semblerait que si j'affiche directement mes images PNG sous IE7, eles aient déjà un fond bleuté au lieu de transparent. Cela n'a donc rien à voir avec mes <DIV>

[spitou_77]

Oui c'est bien un problème de png avec IE 5 et 6

Tu devrais trouver ton bonheur pour résoudre ce problème à cette adresse:http://homepage.ntlworld.com/bobosola/index.htm

Dans IE 7, il n'y pas de soucis

[Nyphel]

Bonsoir,

A vrai dire un problème se pose.
En effet ce script corrige le problème lorsque j'utilise des images PNG de façon normale... Toutefois, dans mon cas, les balises <DIV> contenant les images sont générées à partir d'une fonction Javascript.

En pratique mon menu est présent sur chaque page du site.
Je l'ai donc déclaré dans un fichier Javascript annexe, et chaque page HTML fait appel à une fonction Javascript qui va m'écrire mon menu. Dès lors les images ne sont plus du tout affichées si j'utilise le script de correctif PNG.

Appel depuis ma page 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
<?xml version="1.0"?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
  <HEAD>    
        <META http-equiv="Content-Type" Content="text/html; charset=ISO-8859-1">
        <script src="load_data.js" type="text/javascript"></script>
 
        <!--[if lt IE 7]>
        <script defer type="text/javascript" src="pngfix.js"></script>
        <![endif]-->        
  </HEAD>
  <BODY>
 
<TABLE width="100%" border="0"><TR valign="top">
<TD width="150px">
    <script type="text/javascript">import_menu("accueil");</script>
</TD>
<TD>
...

Code Javascript correspondant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// --------------------------------------------------------------
// Affiche le menu dynamique à étiquettes, utilisant "menu.css"
// --------------------------------------------------------------
 
function import_menu(page)
{
  var html_data = "";
 
  // Ecriture d un des boutons du menu (section <DIV> contenant une image PNG)
  html_data += "    <div id=\"div_partenaires\">   <a href=\"partenaires.html\"> <img src=\"images/menu/etiquette_partenaires.png\" />  </a></div>               ";
 
  document.write(html_data);
}

Je ne comprends pas comment appliquer le script de correctif PNG dans le cas présent :s