Help !compatibilité affichage en absolute sous IE6 et Firefox

Position absolute n' est pas supposé être incompatible avec IE et pourtant ..;
Voila l' adresse à visiter :
http://yvesperso.ouvaton.org/voyagevenise/newvenisetexte.htm
J' ai un peu bosser pour avoir un affichage de photos au survol d'un icone exactement cadré sur la page texte avec des css et bien sur ok sur firefox windows et linux mais pas sur IE 6.0 .
Si vous pouvez me sortir de ce mauvais pas ...car je ne pense pas pouvoir y arriver tout seul...
Des éléments pour m' aider :
Le module css associé :

a écrit :
/*Styles images cliquables février 2007 */

a.image, a.imagevert {display:block;width:26px;height:18px;background: url(../egg/oeil01.gif)
no-repeat 0 0 ;text-decoration:none;text-align:center;}

a.image img, a.imagevert img {display:none;}

a.image span, a.imagevert span {display:none;}
a.image:hover, a.imagevert:hover {background: url(../egg/oeil02.gif);}/*hack IE*/

a.image:hover img {display: block;position:absolute;top:80px;right:0px;width:650px;height:433px;border:solid 1px black;}

a.image:hover span {display: block;color:black;width:650px;height:20px;border:solid 1px black;position: absolute;right:0px;top:60px;background-color:#E7E4E4;}

a.imagevert:hover img {display: block;position:absolute;top:80px;right:0px;width:326px;height:433px;border:solid 1px black;}

a.imagevert:hover span {display: block;color:black;width:326px;height:20px;border:solid 1px black;position: absolute;right:0px;top:60px;background-color:#E7E4E4;}

et le html :

a écrit :
Changement de cap et nous nous rapprochons d' une île d abord seulement visible par son clocher puis de plus en plus nette au fur et à mesure de notre progression.

<a class="image" href="#"><IMG src="http://yvesperso.lost-oasis.net/voyagevenise/zooms/zoom05.jpg"><span>ILE DE BURANO</span></a>


Encore quelques efforts et nous longeons ses premiers quais, puis nous pénétrons par le canal principal .<br>

Normalement au passage de la souris IMG et Span apparaissent positionnées en absolute ,sous IE ça ne fonctionne pas .....j' imagine que le référent pour absolute n'est plus le même avec IE?... sur ma page le seul contenant positionné est "un div "conteneur" positionné en 0,0 ....
si j' enléve position absolute IE m affiche l' image depuis le point en cours ,c' est donc bien absolute qui "m...." arche pas !
Pour l' anecdote j ai mis bottom à la place de top et .....l' image apparait mais ......ne disparait plus !!! ça fait peur !!!
Bref, toute remarque conseil vivement appréciés ...

Bon effectivement le référent sous IE est la position 0,0 ....avant le scroll .
Donc les images sont affichées hors écran .
Premier point .
Deuxiéme point:
lorsqu un quelconque positionnement absolu,fixe ou relatif est renseigné pour l' affichage du lien survolé, l' affichage sous IE est de plus "bloqué" (l image ne disparait plus quoi que fasse la souris).
Si aucun positionnement n' est précisé, l' affichage/disparition fonctionne correctement (mais bien sur en partie hors écran selon le scroll).
Le plus "drole" dans ce dernier cas,c' est que Firefox windows m affiche alors l' image en transparence (tesxte visible dans l image)!!!
SVp vous avez les anti dotes ???
paceque sinon, je vais retourner au scrip Javascript ....en courant !

Suggestions en passant (il est un peu tard, et je n'ai pas le temps d'étudier ça en détail) :

1. Supprimer cet affreux défilement interne. Se reposer sur le défilement normal de la page, pas sur de fausses frames posant d'important problèmes d'ergonomie et d'accessibilité.

2. Si on tient vraiment à garder le titre (écrit en Comic Sans... enfin bon, tous les gouts sont dans la nature ) toujours visible en haut de page, utiliser le positionnement fixe pour l'en-tête. Compatible IE7, Firefox, Opera, Konqueror, etc. Tant pis pour IE6 : les utilisateurs de ce navigateur auront un en-tête normal, non fixe.

3. Ne pas charger les grandes images au chargement de la page. Afficher des vignettes pour que les visiteurs aient un aperçu du contenu des grandes images, et faire pointer ces vignettes (lien hypertexte standard) vers les grandes images, ou mieux si possible vers une page web minimale présentant la grande image et un texte alternatif (attribut alt de l'image et/ou légende accompagnant l'image).

4. Si on veut absolument afficher les grandes images dans la page en cours, ne pas passer par les CSS (du moins pas pour l'effet dynamique... pour la mise en forme, bien sûr on passera par les CSS) mais par du Javascript qui va bien.

Oui c' est un peu lapidaire et vous ne répondez pas aux questions précises que je pose mais bon .....je vous remercie de votre réponse .
Il est vrai que je souhaitais une structure frame à mon site mais je vais sans doute essayer le défilement total pour les pages textes .
Mais mon probléme immédiat c' est :
Pourquoi IE affiche un block positionné en absolute dans un bloc scrollable hors écran alors qu'il devrait l' afficher relativement au bloc positionné parent ...dans mon cas la page/bloc conteneur.Probléme de CSS donc .est ce que c' est contournable ?
Je veux bien d' ailleurs me passer de ce positionnement qui en plus génére un comportement tordu de IE sur la pseudo classe a:hover ....
Mais alors que dire de Firefox/Windows qui si je garde le positionnement du display dans le flux courant m' affiche l image en transparence sur le texte ??????

Merci d' éclaircir ces deux points CSS .....seulement .

PS:la tactique du javascript/pages htm minimales ,c' est ce que j' avais fais précedemment mais je voudrais éviter les "vrais" clics pour les "over" .

Je crois qu'il ne faut même pas chercher à débuguer le comportement d'internet explorer... ici, c'est le procédé de mise en page utilisé lui-même qui est bugué. Pour information, le rendu dans Opera 9 (qui sur plusieurs points interprète mieux les CSS que Firefox) est similaire à celui d'IE. Ce procédé de mise en page, pour le moins douteux, est peut-être bien basé sur un bug de Firefox...

Dans Konqueror 3.5 : le positionnement des grandes images est à peu près correct, par contre la molette de la souris est inutilisable pour faire défiler le contenu. Je suppute que sous Safari ça risque de donner quelque chose de semblable.

yves a écrit :
Je veux bien d' ailleurs me passer de ce positionnement qui en plus génére un comportement tordu de IE sur la pseudo classe a:hover...
Mais alors que dire de Firefox/Windows qui si je garde le positionnement du display dans le flux courant m' affiche l image en transparence sur le texte ??????

Il ne faut pas juste se passer du positionnement absolu, mais de tout ce procédé de rollover/affichage au survol des images qui, pour le dire franchement, est un bricolage dangereux (car très peu robuste, comme on peut le constater).

Je vous renvoie donc aux points 3 et 4 de mon intervention lapidaire ci-dessus.

yves a écrit :
PS:la tactique du javascript/pages htm minimales ,c' est ce que j' avais fais précedemment mais je voudrais éviter les "vrais" clics pour les "over".

Bien tenté, mais c'était une mauvaise idée.
Il aurait été plus pertinent d'améliorer votre solution précédente, par exemple en vous assurant qu'elle respecte les contraintes d'accessibilité (c'est à dire : textes alternatifs pour les images, liens hypertextes fonctionnels sans Javascript, etc.).

yves a écrit :
Tout est la pourtant au niveau des possibilités mais à cause de toutes ces divergences d interprétation on est réduit à utiliser un langage/script qui a au moins le mérite de ne permettre qu' une seule interprétation!!

En l'occurrence, ce que tu veux faire c'est ne pas intégrer les grandes images dans le contenu principal (au niveau de la perception qu'en a l'utilisateur, du moins), mais les rendre facilement accessible depuis divers repères au sein de ce contenu principal. Pour ça, nul besoin de Javascript ou de CSS. On a quelque chose de très pratique qui existe depuis les débuts du Web : le lien hypertexte.

Si tu veux vraiment enrichir pour faire un système « plus cool » voire « plus ergonomique » (ce qui pourrait être débattu, mais passons), aussi bien visuellement qu'au niveau du comportement, je te conseille très fortement de te pencher sur les scripts déjà tout prêts de type Lightbox JS, par exemple. Ça n'est pas parfait, mais peut-être mieux que ce que tu pourras faire par toi-même (suivant ton niveau en Javascript).
http://www.huddletogether.com/projects/lightbox/

yves a écrit :
est ce que les :hover sont bien gérés par ce biais ?

La pseudo-classe :hover fait partie du langage CSS, et n'existe pas en Javascript. Mais il existe d'autres moyens pour réaliser des effets de survol en Javascript.

Merci beaucoup pour le lien, je le garde "sous le coude" car il n y a aucun
doute que ce soit mieux que ce que je peux produire à l' heure actuelle !
Trés cool mais dommage que ce ne soit pas du "mouse over" ,je ne dis pas ça
par snobisme mais tout simplement parce que personnellement je déteste
cliquer ouvrir et recliquer sur les croix pour fermer plusieurs fois de suite
et je pense que c' est le cas de pas mal d utilisateurs ....

yves a écrit :
Trés cool mais dommage que ce ne soit pas du "mouse over"

Le gros problème du « mouse over », en plus d'être beaucoup moins accessible (!), c'est que ça demande un chargement de toutes les images dès le chargement de la page. Ce qui peut faire des pages de quelques Mo !

Les effets de survol n'impliquant pas de choix volontaire de la part du visiteur (clic, validation avec Enter pour la navigation au clavier, etc.) et qui ont pour conséquence de charger un contenu complet sont à proscrire pour ces raisons.
Modifié par Florent V. (05 Mar 2007 - 21:59)

J' ai trouvé un site avec des trucs assez costauds pour ces effets CSS ,ça fait plaisir,on se sent moins seul !
regarde la :
http://www.cssplay.co.uk/menu/image_magnifier2.html

Par contre je ne comprends pas les balises <!--[if lte IE 7]> ???
C' est quoi ? pas du PHP puisque la page est en .htm ....
apparemment cela permet de changer de code selon le navigateur ??

Salut,

yves a écrit :
J' ai trouvé un site avec des trucs assez costauds pour ces effets CSS ,ça fait plaisir,on se sent moins seul !

C'est amusant mais ça reste très gadget.

yves a écrit :
Par contre je ne comprends pas les balises <!--[if lte IE 7]> ???
C' est quoi ? pas du PHP puisque la page est en .htm ....
apparemment cela permet de changer de code selon le navigateur ??

Ce sont des commentaires conditionnels.

Ce sont des commentaires conditionnels

De simples commentaires ou est ce que c' est fonctionnel en pratique ?

Encore plus fort :

http://www.cssplay.co.uk/menu/slides.html
http://www.cssplay.co.uk/menu/complex_slides.html

Je ne sais pas si ces deux derniers scripts sont compatibles IE mais si c' est le cas ... c' est du CSS ultime !
Gadget, je veux bien mais du gadget sérieux et une super maitrise du css, je ne comprends pas vraiment vos réticences si ce n 'est qu' il s' agissent de demos sans réel contenu et non de vrais sites web ....
....A suivre .

yves a écrit :
De simples commentaires ou est ce que c' est fonctionnel en pratique ?

Euh... Tu as lu l'article que j'ai donné en lien ?

a écrit :
Euh... Tu as lu l'article que j'ai donné en lien ?

Décidemment je suis "un vrai boucan!" comme on dit à Marseille ....
En tous les cas trés intéressant .
Je reviens de la planéte Windows (mon Os secondaire apré linux) et IE : les scripts "slideshows" fonctionnent à merveille ....
C' est vraiment trop injuste :ils utilisent les mêmes méthodes que moi .....mais eux ça marche et moi pas ....(le positionnement absolute sur du scroll en particulier)... C 'est surement du à ce que mes pages étaient en "scroll interne" (block / overflow:auto;) et pas en scroll "natif" ??

Bon ben moi le week end prochain, je m' y remets sur ces bases .

Bonjour,

J'arrive peut être après la bataille mais j'aurais bidouillé un truc comme ça (compatible FF, IE 7 & 6 je crois)

<style type="text/css">	

a{
display:block;
width:26px;
height:18px;
border: 2 px solid red;
text-decoration:none;
position: relative
}

a img {	
width:26px;
height:18px;
border: 0;
}

a span{
display:none;
}

a:hover {background: none;}/*hack IE6*/

a:hover span {
display: block;
position:absolute;
top:0px;
left:100px;

}

a:hover span img{
width:650px;
height:433px;
border:solid 1px black;
}

a:hover em {
display: block;
color:black;
width:650px;
text-align: center;
background-color:#E7E4E4;
border:solid 1px black;
}

</style>
</head>

<body>

<a href="#"><img src="ton_image.gif"><span><em>ILE DE BURANO</em><img src="http://yvesperso.lost-oasis.net/voyagevenise/zooms/zoom05.jpg"></span></a><!-- les &nbsp; c'est une autre boulette IE6 en plaçant des espaces, il va à la ligne entre chaque mot !! -->

</body>

voilou

yves a écrit :
Gadget, je veux bien mais du gadget sérieux

L'usage abusif des styles CSS pour des fonctionnalités dynamiques pose généralement tout un tas de problèmes d'accessibilité. Ou encore de robustesse des solutions développées (en gros : des trucs pas trop utilisables en production).

Niveau accessibilité, deux remarques rapidement sur le premier slideshow CSS :
- il faut charger toutes les images en grande taille (450 Ko, rédhibitoire pour le bas débit, et méchant dans tous les cas pour la bande passante d'un site) ;
- chaque image est dans un lien qui ne mène nulle part (gros problème pour les non voyants, par exemple), et qui sert uniquement obtenir un effet au survol compatible avec IE6.

Un examen minutieux permettrait sans doute d'établir une liste de tous les problèmes soulevés par ces techniques (que je serais tenté de qualifier de gentils bidouillages, mais j'aurais peur d'être trop catégorique...).