Problème d'affichage firefox et IE

[Résolu/Fermé]
Signaler
Messages postés
24
Date d'inscription
mardi 15 avril 2008
Statut
Membre
Dernière intervention
19 juin 2013
-
Messages postés
24
Date d'inscription
mardi 15 avril 2008
Statut
Membre
Dernière intervention
19 juin 2013
-
Bonjour,
Voici maintenant 1semaine que je cherche la solution à mon problème et je vous assure que je glande. J'utilise une image de ma galerie et au passage du curseur sur l'image, une infobulle apparait à la place de l'image avec tous les détails de celle-ci. J'ai utiliser un petit script CSS en ligne que j'ai adapté à ma convenance mais j'ai tous les problèmes pour l'adapter à internet explorer. J'ai tenté un hack css qui décale le positionnement de l'infobulle. Suis encore débutant en CSS et je bidouille quelque peu.

######### CSS FIREFOX OK ############

a.info {
font-family: Tahoma,"Times New Roman",serif;
position: relative;
text-decoration: none;
/* border-bottom: 1px gray dotted; */ /* On souligne le texte. */
}
a.info span {
display: none; /* On masque l'infobulle. */
}
a.info:hover {
background: none; /* Correction d'un bug d'Internet Explorer. */
z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
/* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
display: inline; /* On affiche l'infobulle. */
position: absolute;
white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
top: -30px ; /* On positionne notre infobulle. */
left: 0px;
width: 112px;
height: 160px;
font-size: 10px;
color: #FFFFFF;
background: #111111;
padding: 3px;
border: 1px solid #333333;
opacity : 0.9;
text-transform: capitalize;
top: -153px !important ;

}

########## CSS HACK IE PAS OK ###############

a.info {
font-family: Tahoma,"Times New Roman",serif;
position: relative;
text-decoration: none;
/* border-bottom: 1px gray dotted; */ /* On souligne le texte. */
}
a.info span {
display: none; /* On masque l'infobulle. */
}
a.info:hover {
background: none; /* Correction d'un bug d'Internet Explorer. */
z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
/* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
display:block; /* On affiche l'infobulle. */
position:absolute;
white-space: nowrap;
top: 0px ; /* On positionne notre infobulle. */
width: 112px;
height: 160px;
font-size: 10px;
color: #FFFFFF;
background: #111111;
padding: 3px;
border: 1px solid #333333;
opacity : 0.9;
text-transform: capitalize;
}


J'ai vraiment besoin de votre aide.

2 réponses

Messages postés
222
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
2 mars 2016
7
Bonjour, en regardant vite fait, je ne vois pas beaucoup de "margin-left" ou "right" pour corriger une position... Mais ton prob se situe où exactement, positionnement : Padding ? margin ? top ? bottom ?... Sur ton hack ie il faut corriger le positionnement pour ie (plus bas, plus haut, plus à droite, etc...).
Messages postés
24
Date d'inscription
mardi 15 avril 2008
Statut
Membre
Dernière intervention
19 juin 2013
2
Oyéééééééééééééééééééééééééééééé !
Pas si novice finalement le noviceman, j'ai trouvé la réponse à mon problème en ajouter dans mon hack CSS, la ligne margin-top:153px et tout est disposé comme sous Firefox. je t'en dois une Noviceman
Encore merci et bonne journée.

Cheeeeeeeeeeeerrrrrrrrsssssssssssssssssss