span détesté par IE

**qmulonainbus** · 14/09/2006, 17h07

Bonjour
j'ai fait un pseudo-menu pour mon site
mais voilà ce dernier s'affiche entièrement sous firefox :

mais avec l'éternel IE et son lot de problème, une partie de mon menu n'est pa affichée :

la partie qui pose problème (à mon avis) est : a.bouton span et les a.slide span
j'ai beau chercher je ne trouve pas à quoi celà c'est du (j'ai testé le masque ce n'est pas lui)
pour une version en ligne :
http://www.leroux-jf.fr/test%20menu/gallery.html
(test effectué avec IE version 6)

si quelqu'un a une idée je suis preneur
en vous remerciant d'avance

**blueice** · 14/09/2006, 18h44

Deja commence par enregistrer ta page en UTF-8..

Place tes entetes correctement...

J'ai corrigé les erreurs :

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css">
 
#container
{
  position:absolute;
  width:134px;
  height:20px;
  top:0px;
  left:100px;
  background:none;
  border:0px
  solid #000;
  margin:0 0;
  text-decoration: none; /*ajout*/
  outline:none; /*new*/
  z-index: 49;  
}
 
a.bouton
{
  display: bloc;
  border:0px solid #000;
  text-decoration: none; /*ajout*/
  width:19px; 
  height:20px;
  float:left;
  margin:0px 0px;
  position:relative;
  z-index: 49; 
  border:0;   
  outline:none;/*new*/
}
 
/*miniatures*/
a.slidea {  background:url(Bmenu3.gif);opacity:.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;  z-index: 50;   background-repeat:no-repeat;  background-position: 0 0;  text-decoration: none; /*ajout*/  outline:none;/*new*/  border:0;}
a.slideb {  background:url(Bmenu3.gif);opacity:.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;  z-index: 50;  text-decoration: none; /*ajout*/border:0;} 
a.slideb {  background:url(Bmenu3.gif); opacity:.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;  z-index: 50; text-decoration: none; /*ajout*/  border:0;}
a.slidec {  background:url(Bmenu3.gif); opacity:.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;  z-index: 50; text-decoration: none; /*ajout*/  border:0;} 
a.slided {  background:url(Bmenu3.gif); opacity:.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;  z-index: 50; text-decoration: none; /*ajout*/  border:0;} 
a.slidee {  background:url(Bmenu3.gif); opacity:.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;  z-index: 50; text-decoration: none; /*ajout*/  border:0;} 
a.slidef {  background:url(Bmenu3.gif); opacity:.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;  z-index: 50; text-decoration: none; /*ajout*/  border:0;} 
a.slideg {  background:url(Bmenu3.gif); opacity:.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;  z-index: 50; text-decoration: none; /*ajout*/  border:0;} 
 
a.bouton span  /*lieu de tous les déboirs*/
{
  visibility:visible; /*cool*/
  display:block; 
  position:absolute; 
  text-decoration: none; /*ajout*/
  width:250px; 
  height:120px; 
  top:0px; 
  left:0px; 
  border:0;
  background:none; 
  outline:none; /*new*/
  color:white;/*new*/
  z-index: 49;  
}
 
a.slidea span {left:-105px; top:20px; border:0;text-decoration: none;outline:none;} /*zone où apparait l'image cliquée*/
a.slideb span {left:-124px; top:20px; border:0;text-decoration: none;outline:none;} /*zone où apparait l'image cliquée*/
a.slidec span {left:-145px; top:20px; border:0;text-decoration: none;outline:none;} /*zone où apparait l'image cliquée*/
a.slided span {left:-165px; top:20px; border:0;text-decoration: none;outline:none;} /*zone où apparait l'image cliquée*/
a.slidee span {left:-186px; top:20px; border:0;text-decoration: none;outline:none;} /*zone où apparait l'image cliquée*/
a.slidef span {left:-207px; top:20px; border:0;text-decoration: none;outline:none;} /*zone où apparait l'image cliquée*/
a.slideg span {left:-225px; top:20px; border:0;text-decoration: none;outline:none;} /*zone où apparait l'image cliquée*/
 
 
 
 
a.bouton:hover /*etat du bouton en survol*/
{
  background-image: url(Bmenu3.gif);
  background-repeat:no-repeat;
  background-position: 0 -20px;
  border:0;
  opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1;
  text-decoration: none; /*ajout*/
  z-index: 49;
  outline:none;/*new*/  
  color:#000;/*new*/
}
 
a.bouton:hover span /*etat du pseudo-texte lors du survol des boutons*/
{
  visibility:visible;
  z-index: 49; 
  text-decoration: none; /*ajout*/
  outline:none;/*ajout*/
  border:0;  
  color: none;
} 
 
.masque { /*pour empecher que le hover des pseudo-texte fonctionne*/
  width: 250px;
  height: 123px;
  display: block;
  text-align: center;
  border: 0px solid gray;
  text-decoration: none;
  position:absolute;
  top:20px;
  left:0px;
  color: #000;
  background: white;
  margin:0px 0px;
  opacity:0.8; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8;
  border:1;
  z-index: 50
}
 
.fond { /*ligne avec coin*/
  width: 288px;
  height: 155px;
  display: block;
  text-align: center;
  border: 0px solid gray;
  text-decoration: none;
  position:absolute;
  top:-10px;
  left:0px;
  background:url(corner2.gif) ;
  margin:0px 0px;
  z-index: 48;
}
</style>
 
</head>
<body>
<div class="masque"></div>
<div id="container">
<a class="bouton slidea" href="index.html"><span><img src="M1.gif" alt="#" /></span></a>
<a class="bouton slideb" href="#nogo"><span><img src="M2.gif" alt="#" /></span></a>
<a class="bouton slidec" href="#nogo"><span><img src="M3.gif" alt="#" /></span></a>
<a class="bouton slided" href="#nogo"><span><img src="M4.gif" alt="#" /></span></a>
<a class="bouton slidee" href="#nogo"><span><img src="M5.gif" alt="#" /></span></a>
<a class="bouton slidef" href="#nogo"><span><img src="M6.gif" alt="#" /></span></a>
<a class="bouton slideg" href="#nogo"><span><img src="M7.gif" alt="#" /></span></a>
</div>
<div class="fond"></div>
</body>
</html>

**qmulonainbus** · 14/09/2006, 23h18

merci pour la correction
aucun changement sous firefox (cool

)
mais IE aucun changement sinon que ya plus que le bouton de gauche qui marche

pourquoi? help please

**blueice** · 15/09/2006, 00h14

Je n'ai fait que corriger le code.

Pourquoi n'utilises pas une image avec les deux états, normal et survolés ?
Au passage sur le point tu déplaces l'image en question...

**qmulonainbus** · 15/09/2006, 00h41

ok
pour l'image comprenant 2 états je le fais pour les boutons oranges

mais pour le texte, j'y avais pensé puis avais pris cette piste là
ce n'est qu'un changement de transparence je ne vois pourquoi IE refuse :s

je vais essayer aussi la double image pour voir...

en attendant toutehypothèse est la bienvenue ^^

**Candygirl** · 15/09/2006, 01h04

Envoyé par qmulonainbus

toutehypothèse est la bienvenue ^^

pas d'hypothèse mais un exemple qui fonctionne si tu veux t'en inspirer (le tiens me semblait un peu complexe, je trouvais plus rapide de partir de zéro

):
Pièce jointe 4758

span détesté par IE

HTML

Vue hybride

Discussions similaires

Partager

Partager