Soucis de CSS sous IE

25 août 2008, 15:00

IE est mon cauchemard (no troll inside). Sur l'appli que je codais il y a quelques semaines, je fais passer une info-bulle au passage de la souris sur des noms. Sous Firefox, c est nickel, c est joli \0/.
Sous IE un peu moins :/.

Voila le code CSS :

Code : Tout sélectionner

/* Mise en forme des infos-bulles*/
a.info_bulle span.info_bulle{								   
  display          : none; /* Rend invisible tout notre bloc span */
} 
 
a.info_bulle{				
  color           : #2F368A;
  text-decoration : none; 
  padding         : 5px 10px 5px 5px; /*Définition des marges intérieures de notre lien haut, de droite, du bas et de gauche */ 
  position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */ 
}  
 
a.info_bulle:hover {
  border          : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
} 

a.info_bulle:hover span.info_bulle{				
  display        :  block;    /* Rend visible notre bloc span */
  position       :  absolute; /* Sort notre bloc de son conteneur afin de le positionner */ 
  font-size      : 11px;
  width          : 220px;     /* On fixe une largeur par défaut */
  color          : #000;      /* Réinitialisation de la couleur du texte */
  text-align     : left;   /* Justification du texte */	
  cursor         : default;   /* Réinitialisation de notre curseur, sinon par défaut on a le même que notre lien */
  /* Positionnement de notre info-bulle */
  top            : 1.8em;     
  left           : 1px;
  z-index        : 1000; /* Positionne au premier plan l'info-bulle en cas de chevauchement */
}  

span.header{
   display         : block; 
   height          : 30px;  /* Hauteur correspondant à celle de notre image */
   line-height     : 220%;  /* Propriété qui centrera le texte verticalement */
   text-align      : center;
   background      : transparent url('./top.gif') no-repeat 0 0; 
   font-size       : 13px; 
   font-weight     : bold;
} 

span.content{
   display     : block; 
   background  : transparent url('./centre.gif') repeat-y;
   padding     : 0 8px;
   
} 

span.footer{
   display     : block; 
   height      : 5px; 
   background  : url('./bot.gif') no-repeat bottom left; 
   font-size   : 0; /* Corrige l'espacement inutile sous IE */
}

Et le code PHP pour afficher l'info-bulle (le code PHP fonctionne bien) :

	//Affichage des infos de l user dans une info bulle				
	$span = '<span class="info_bulle">';
	$span .= '<span class="header">'.$calendarByUser['nom'].'&nbsp;'.$calendarByUser['prenom'].'</span>';
		$span .= '<span class="content">';
		if(isset($calendarByUser['fonction'])){ 
			$fct = array("C" => "Chef d'&eacute;quipe", "A" => "Assistant(e)");
			$span .= $fct[$calendarByUser['fonction']].'<br />'; 
		}
		$loc = array("F" => "France", "OM" => "Outre-Mer");
		$span .= 'Localit&eacute;&nbsp;:&nbsp;'.$loc[$calendarByUser['location']];
		$span .= '<br />Equipe num&eacute;ro&nbsp;'.$calendarByUser['num_equipe'];
		if(isset($_SESSION['passweurd'])){
			$span .= '<br /><em>Pour modifier une personne, cliquer.</em>';
		}
		$span .= '</span>';
	$span .= '<span class="footer"></span>';
	$span .= '</span>';	
	echo $span;

Pour vous rendre compte de ce que ça fait, voila un screen :

Merci d'avance

.

25 août 2008, 17:25

A première vue ce serait un problème de z-index non ?
Je sais que sous IE il y a des problèmes avec ça, à creuser.

26 août 2008, 10:33

Possible. En tout cas, si je le met en commentaire, j'ai le même soucis avec Mozilla Firefox. Donc sa suppression n'est pas la solution...

26 août 2008, 10:50

Et si tu ajoutes le z index sur ta classe a.info_bulle ?
Ou un z index inférieur sur ton span ?
Meme probleme ?

26 août 2008, 19:19

Ce que je comprends pas c'est que

        if(isset($_SESSION['passweurd'])){
            $span .= '<br /><em>Pour modifier une personne, cliquer.</em>';
        }

s'affiche dans ta bulle avec IE7 et pas avec FF...

alors que c'est normalement PHP qui traite la condition...

30 août 2008, 16:59

Ce que je comprends pas c'est que
        if(isset($_SESSION['passweurd'])){
            $span .= '<br /><em>Pour modifier une personne, cliquer.</em>';
        } 
s'affiche dans ta bulle avec IE7 et pas avec FF... alors que c'est normalement PHP qui traite la condition...

Je te rassure, j ai fais le screen en etant "connecté" sous IE et non-connecté pour Firefox.

Dans un premier temps j ai dis dans ce post que j avais réglé le soucis mais c est un autre bug ss IE que j ai corrigé au final, donc celui-ci n est pas encore trouvé.

Soucis de CSS sous IE

Qui est en ligne