CSS ne fonctionnant pas sous IE

**arnaud_verlaine** · 15/11/2005, 15h30

Bonjour,
Voilà je suis en train de bosser sur un site web PHP avec CSS.
J'ai fait un ordganigramme de la société en question et je souhaiterais afficher une infobulle au passage de la souris sur les rubriques choisies.
Bien entendu le CSS n'est pas encore au point designement parlant (sais pas si ça se dit

) mais c'est juste pour tester. Je développe via Firefox où ca passe sans problème. Mais sous IE, les infobulles ne s'affichent pas

Pourriez-vous me dire ce qu'il y a à changer?
L'adresse du site : ici
Merci

**raptor70** · 15/11/2005, 15h35

Je suppose que tu utilise une redirection dans ta css :

Code :

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

1
2
 
a:hover>div.infobulle{  display:block; }

ou un truc comme ca....

l'opérateur ">" n'est pas compatible avec IE mais l'est avec FF

**raptor70** · 15/11/2005, 15h35

Solution : Javascript

**arnaud_verlaine** · 15/11/2005, 15h39

Non je n'utilise pas de ">"
Mon code est le suivant :
Index.php

Code :

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

1
2
3
4
5
6
 
if ($Rubrique == "Accueil")
echo"
<div class='Organigramme'><img src='images/Organigramme.gif' alt=\"Structure de l'entreprise\" border=\"0\" height=\"500\" width=\"520\"></div>
<a  class=\"Infobulle\"><div class='InfoBulleDirection'><span>INFOOBULLE</span></div></a>
";

et feuille de style:

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
 
a.InfoBulle:hover {
   background: none; /* correction d'un bug IE */
   }
a.Infobulle span { /* définition de la balise <span> inclue dans <a> */
   display: none;
   }
   a.Infobulle:hover span {
	position: absolute;
	width: 200px;
	height: 100px;
	background-color: #666666;
	padding: 5px;
	display: inline;
	color: #CCCCCC;
	margin-top: 10px;
	filter:alpha(opacity=70); 
	-moz-opacity:0.7;
	opacity: 0.7;
 
   }
.InfoBulleDirection{
position:absolute;
left:233px;
top:115px;
width:215px; 
height:63px;
border-width:2px;
border-style:solid;
bordercolor:red;
background:transparent;cursor:help;
}

Voyez-vous l'erreur?
Je préfère ne pas passer par du JavaScript si possible...

Merci

**raptor70** · 15/11/2005, 15h47

Ca viens peut être aussi de la transparence...essaye en mettant un fond opaque...

**arnaud_verlaine** · 15/11/2005, 15h51

non ca change rien....
Rien que le curseur HELP je l'ai dans la totalité de mon bloc <div> ce qui est logique et bien sous IE il apparait juste quand on passe sur le bord du <div>...
Si quelqu'un sais me tirer du bourbier

Je lui paie une mousse au bar d'en face

**SpaceFrog** · 15/11/2005, 15h58

le hover ne fonctionne que sur a sous IE ...

**arnaud_verlaine** · 15/11/2005, 16h00

Arff c'est pas vrai..

Je suis donc obligé pour faire des infobulles comme cela de passer par du javascript ou y-a-til une technique en CSS?
D'avance, Merci

**raptor70** · 15/11/2005, 16h00

Envoyé par SpaceFrog

le hover ne fonctionne que sur a sous IE ...

C'est ce qu'il a fait il me semble... -1
et le problème viens d'IE ...-1

**arnaud_verlaine** · 15/11/2005, 16h01

Ben oui je comprend plus moi ici...

**SpaceFrog** · 15/11/2005, 16h02

ha il y a une astuce avec position relative :

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
<style type="text/css">
.info{position:relative; /*this is the key*/
		z-index:24; 
		/*background-color:#ccc;*/
		color:#000;
		text-decoration:none}
 
a.info:hover{
			   display:block/*background-color:yellow;*/
				}
 
a.info div {display: none}
 
a.info:hover div{/*the span will display just on :hover state*/
				   display:block;
				   position:absolute;
				   padding:5px;
				   top:-5em; 
				   left:2em;
				   width:15em;
				   border:2px outset #0cf;
				   background-color:skyblue;
				   color:#000;
				   text-align: center;
				   font-family:verdana; 
				   font-size:11px;
				   z-index:25;}
</style>
 
</head>
 
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
 
<a class="info" href="#" style="position:absolute; left:40%;"><input type="text" name="myinput" /><div> Voici<br/>l'infobulle<br/>en css</div></a>
</body>
 
</html>

**arnaud_verlaine** · 15/11/2005, 16h04

Ben voilà !! Merci

Je vous attend en face pour une mousse ...

**SpaceFrog** · 15/11/2005, 16h09

mhhhh un bière belge

**arnaud_verlaine** · 15/11/2005, 17h07

En fait ca fonctionne presque mais pas encore à 100%..

Sous Firefox ca va impeccable et miracle, sous IE ca va MAIS uniquement en suivant les bords de mon bloc !!
Quelqu'un a-t-il une solution?
Merci

Voici le code :
index.php :

Code :

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

1
2
 
<a  class=\"InfoBulle\" style=\"position:absolute;\" href=\"#\"><span class=\"InfoBulleDirection\" /><div>INFOOBULLE</div></a>

Code CSS :

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
 
.InfoBulle{position:relative; /*this is the key*/
      z-index:24;
      /*background-color:#ccc;*/
      color:#000;
      text-decoration:none}
 
a.InfoBulle:hover{
            display:block/*background-color:yellow;*/
            }
 
a.InfoBulle div {display: none}
 
a.InfoBulle:hover div{/*the span will display just on :hover state*/
               display:block;
               position:absolute;
               padding:5px;
               top:-5em;
               left:2em;
               width:15em;
               border:2px outset #0cf;
               background-color:skyblue;
               color:#000;
               text-align: center;
               font-family:verdana;
               font-size:11px;
               z-index:25;
			   filter:alpha(opacity=70); 
	           -moz-opacity:0.7;
	           opacity: 0.7;
			   }   
.InfoBulleDirection{
position:absolute;
left:233px;
top:75px;
width:215px; 
height:63px;
border-width:2px;
border-style:solid;
bordercolor:red;
background:transparent;cursor:help;
}

**arnaud_verlaine** · 16/11/2005, 11h36

Personne ne voit? Là je tourne en rond j'essaie de passer par du Javascript mais le résultat est le même. sous Firefox ca passe impecc, sous IE juste quand on passe sur le bord des <div>
Si quelqu'un connait une astuce... Merci

**Michel** · 16/11/2005, 15h49

J'ai ajouté une propriété visible: true ou false et chez moi, cela fonctionne ..

Code :

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

1
2
3
4
5
a.info div {visible:false;display:none}
 
a.info:hover div{/*the span will display just on :hover state*/
		visible:true;
....

voila

?

**arnaud_verlaine** · 16/11/2005, 15h55

Non, ca fonctionne sous IE mais plus sous FF.
En plus mes balises <DIV> s'en retrouvent toutes décallées...
Ce n'est pas grave je vais faire autrement. Je vais écrire le texe en dur et là ca passera sans problème pour l'infobulle.
Merci

**Michel** · 16/11/2005, 16h11

bizarreeu ...
Que je t'explique,
je viens de pondre ces lignes sous linux en utilisant quanta et son affichage de page web.
Je met cette ponte sur mon petit serveur et je teste sous FF linux ...OK
Je me branche depuis une vieille becane qui tourne sous XP et je teste sous IE et FF et les résultats sont rigureusements les mêmes dans les 4 cas!!
Alors où est l'os ?
A tout hasard, j'ai utilisé la page proposée un peu plus haut et je te donne le code complet de mon test

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
  <title></title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style type="text/css">
.info{position:relative; /*this is the key*/
      z-index:24;
      /*background-color:#ccc;*/
      color:#000;
      text-decoration:none} 
 
a.info:hover{
            display:block;
            }
 
a.info div {visible:false;display:none}
 
a.info:hover div{/*the span will display just on :hover state*/
		visible:true;
               display:block;
               position:absolute;
               padding:5px;
               top:-5em;
               left:2em;
               width:15em;
               border:2px outset #0cf;
               background-color:skyblue;
               color:#000;
               text-align: center;
               font-family:verdana;
               font-size:11px;
               z-index:25;}
</style>
 
</head>
 
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
 
<a class="info" href="#" style="position:absolute; left:40%;"><input type="text" name="myinput" /><div> Voici<br/>l'infobulle<br/>en css</div></a>
</body>
 
</html>

**arnaud_verlaine** · 16/11/2005, 16h51

Monsieur, vous n'avez pas compris le problème.
En effet ce code fonctionne.
Mon code est différent.

Je n'ai pas ceci :

Code :

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

1
2
 
<a class="info" href="#" style="position:absolute; left:40%;"><input type="text" name="myinput" /><div> Voici<br/>l'infobulle<br/>en css</div></a>

mais ceci :

Code :

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

1
2
 
<a  class=\"InfoBulle\" style=\"position:absolute;\" href=\"#\"><div class=\"InfoBulleDirection\" /><div>INFOOBULLE</div></a>

le problème est que div et div ca ne passe pas...

CSS ne fonctionnant pas sous IE

CSS

Discussions similaires

Partager

Partager