par
BaLiSTiK » 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'].' '.$calendarByUser['prenom'].'</span>';
$span .= '<span class="content">';
if(isset($calendarByUser['fonction'])){
$fct = array("C" => "Chef d'équipe", "A" => "Assistant(e)");
$span .= $fct[$calendarByUser['fonction']].'<br />';
}
$loc = array("F" => "France", "OM" => "Outre-Mer");
$span .= 'Localité : '.$loc[$calendarByUser['location']];
$span .= '<br />Equipe numéro '.$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

.
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]
/* 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 */
}
[/code]
Et le code PHP pour afficher l'info-bulle (le code PHP fonctionne bien) :
[php]
//Affichage des infos de l user dans une info bulle
$span = '<span class="info_bulle">';
$span .= '<span class="header">'.$calendarByUser['nom'].' '.$calendarByUser['prenom'].'</span>';
$span .= '<span class="content">';
if(isset($calendarByUser['fonction'])){
$fct = array("C" => "Chef d'équipe", "A" => "Assistant(e)");
$span .= $fct[$calendarByUser['fonction']].'<br />';
}
$loc = array("F" => "France", "OM" => "Outre-Mer");
$span .= 'Localité : '.$loc[$calendarByUser['location']];
$span .= '<br />Equipe numéro '.$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;
[/php]
Pour vous rendre compte de ce que ça fait, voila un screen :
[img]http://start5g.ovh.net/~fonfonla/images/ie_soucis.JPG[/img]
Merci d'avance :).