[Résolu] Position absolue sous IE6

Bon, le problème est pas très compliqué.

Ouvrez cette page avec Firefox ou IE7 pour voir son fonctionnement normal : http://www.pepes.ca/?p=direction

Lorsqu'on passe la souris sur un des comités (en bas), un carré rouge (<div>) apparaît avec un petit texte. Rien de très compliqué ! Cependant, sous IE6, rien ne se passe. Je suis conscient que mes liens doivent avoir l'attribut href sous IE6 pour que la propriété hover soit prise en compte, ce que j'ai fait. Mais rien n'apparaît.

En fait, le problème semble venir d'un peu partout. Voici le code plus précisément et ce que j'ai essayé :

<a href="#" class="qm">nom du comité<div>texte qui apparaît</div></a>

a.qm { cursor: help; font-weight: bold; }

a.qm div { 
	visibility: hidden; 
	color: #FFFFFF; 
	font-weight: normal; 
	position: absolute; 
	width: 500px; 
	text-align: justify; 
	padding: 5px; 
	margin-top: -50px;
	margin-left: 150px;
	border-color: #AA0000;
	z-index: 100;
}

a:hover.qm div { visibility: visible; }

J'ai essayé la propriété display au lieu de visibility, qui donne des résultats fort différents sous IE6 selon ce que j'ai pu expérimenter mais je n'arrive toujours pas au résultat voulu. En fait, en jouant avec ces deux propriétés et en supprimant les marges, la largeur fixe et/ou la position absolue/relative, j'arrive à faire afficher quelque chose ou non lorsque je passe la souris dessus ou non. Disons que j'ai un peu tout essayé mais rien n'amène au résultat sous IE7 et Firefox. Je suis un peu à cours de solution.

Merci d'avance,
Daniel
Modifié par D@n!eL_ (29 Jun 2008 - 04:32)

Bonsoir D@n!eL_,

La FAQ, ou l'un des liens connexes de la FAQ pourront sans doute te venir en aide
Je te laisse parcourir les autres liens fournis, éventuellement faire une recherche dans les sujets déjà traités

Bon courage
Cdt,
Sylvain

C'est le background: none qu'il me manquait. Disons que je n'aurais jamais trouvé...
Vive Firefox !

Merci beaucoup.

bonjour/bonsoir

Pour IE6 , en modifiant ou donnant une propriéte a background pour a (differente d'un etat a l'autre) , cela force IE a appliqué a l'ecran l'ensemble des regle css.

On pourrait presque dire et préconisé de faire un 'auto-reflow' par defaut des balise de lien pour IE6 comme ceci dans la feuille de style principale .. mais comme IE6 est mourant , inutile de lancé un troll :

a:hover {background:none transparent;}

Code a priori inutile , sauf dans IE qui se reveille et rafraichis la zone concernée.

Par ailleurs , ton info-bulle sur le lien est 'invalide' , Une balise de lien (de type 'inline(en)' ) ne peut contenir d'élement de type 'block(en)' .
Ton div devrait-etre un span (tout aussi neutre que le div) , Le positionnement absolu , ne necessite même pas de le declaré en element 'block(en) .

Le contenu des lien ne devrait pas nom plus contenir trop de texte ... (pour info , aspect secondaire a ton probléme , si quelqu'un d'autre veut devellopper ... ) .

GC

<grillé , a laisser trainé une fenêtre ouverte .... bonne soirée . />
Modifié par gcyrillus (27 Jun 2008 - 21:23)

gcyrillus a écrit :
.. mais comme IE6 est mourant , inutile de lancé un troll

L'agonie risque quand même d'être un peu longue !

Je connais l'usage du <span>, seulement il ne s'agit pas nécessairement d'une simple infobulle. Dans ma page de commanditaires, c'est une image que j'affiche dans mon <div> (vous me direz que je n'ai pas besoin de m'embarrasser de divisions ni de quoi que ce soit mais bon) alors que je m'en sers également pour faire afficher un texte dans le haut du site quand on passe le curseur sur un but du terrain.

D@n!eL_ a écrit :
Je connais l'usage du <span>, seulement il ne s'agit pas nécessairement d'une simple infobulle. Dans ma page de commanditaires, c'est une image que j'affiche dans mon <div> (vous me direz que je n'ai pas besoin de m'embarrasser de divisions ni de quoi que ce soit mais bon) alors que je m'en sers également pour faire afficher un texte dans le haut du site quand on passe le curseur sur un but du terrain.

Bonsoir,
heu !? span et div sont toutes deux des balises de type neutre , l'une et l'autre ne servent qu'a cibler une portion de ta page pour y appliquer un style (css) , cibler une portion du contenu sur laquel on veut appliquer un effet dynamique (dhtml , javascript/dom , ajax , etc ..) ou structurer un template , ....

Le choix du div ou du span ne sert donc qu'a rendre le code (x)html valide , il n'y a aucune autre raison à cela , juste suivre une régle toute bête sans même une notion de sémantique en arriere plan .

Pour l'image dans ta page commanditaire et si elle est le seul contenu a montrer au passage de la souris , tu peut directement cibler celle ci sans l'encadrer/imbriqué dans une autre balise sauf si ce morceau generer par le même 'template' .


dans tes 3 cas exposés , ton :

<a href="#" >lien<div class="coucou">texte ou image</div></a>

est invalide , alors que :

<a href="#" >lien<span class="coucou">texte ou image</span></a>

est valide (span ou tout autre balise de type 'inline' .. exepté pour un lien ! ) .
Le css te permet alors de dire/donné le comportement d'affichage que tu veut a tes balises . (none , block ou inline , voir faq pour les autres options de display ) , le positionement ou le flottement te permet aussi de jouer sur ce comportement d'affichage .

En bref le div ne te donne pas plus de pouvoir (possibilité) de mise en forme que le span .

Un element positionné en 'absolute' est extrait du flux naturel de la page (tout comme un element en 'float' l'est en partie , a la difference que celui-ci s'ancre a l'endroit ou il apparait dans le flux , en effectuant un saut de ligne et repousse autour de lui les autres elements/contenus ) , ces 2 régles te permettent de dimensionner ces elements : span autant que div .

Le résultat a l'affichage sera identique , et en passant ta page au validateur , le span ne provoquera pas d'erreurs.

Cordialement .

<hs>
@Heyoan oui oui , d'ailleurs IE6 est encore mon IE par defaut , IE7 en standalone et IE8 est encore absent de ma config ... tout comme ff2 en par defaut et ff3 en standalone ...

sur mon site : 60% d'IE (partage : IE6 a 45% et IE7 a 55%) , firefox a 26% (partage ff3 a 67% et ff2 a 33%) ... et puis Safari devant Opera !? (moins de 3% a eux deux ). .. a 60 visite jours sur ce site , pas sur que ça veuille dire grand chose sauf que je contribue plus que la moyenne de mes visteurs a la survie des vieux machins...</hs>

gcyrillus a écrit :
<hs>
@Heyoan oui oui , d'ailleurs IE6 est encore mon IE par defaut , IE7 en standalone et IE8 est encore absent de ma config ... tout comme ff2 en par defaut et ff3 en standalone ...

sur mon site : 60% d'IE (partage : IE6 a 45% et IE7 a 55%) , firefox a 26% (partage ff3 a 67% et ff2 a 33%) ... et puis Safari devant Opera !? (moins de 3% a eux deux ). .. a 60 visite jours sur ce site , pas sur que ça veuille dire grand chose sauf que je contribue plus que la moyenne de mes visteurs a la survie des vieux machins...</hs>

<hs en réponse au hs >
Pareil pour IE8 : la version beta ne m'intéresse pas et je me contente de lire les articles... Par contre j'ai IE7 sur mon fixe avec IE6 en standalone et IE6 sur mon portable avec IE7 en standalone : tout ça pour pouvoir utiliser la Developer Toolbar dans les 2 modes .
Par contre sur les 2 j'ai FF2 et FF3 en parallèle. (<-- seul "intérêt" de ce hs.)
</hs>
Modifié par Heyoan (29 Jun 2008 - 01:29)