[Résolu] Problème de liens avec IE

Voila je viens de finir mon premier site, j'étais tout fier et tout heureux quand tout à coup je remarquai que sous cette #*$de de IE les liens ne fonctionnaient tout simplement pas du tout...
Voici l'adresse, http://insanecircus.free.fr

Je me tourne donc vers vous pour vous demander une aide généreuse.

Tant quand vous y êtes j'accepte toutes suggestions bien fondées.

Merci beaucoup d'avance !
Modifié par JoK (28 Feb 2006 - 11:37)

Bonsoir,
Tout simplement parceque les lien sont absents (span {display:none})
Ceci dit ça ne fonctionne pas non plus avec un visibility:hidden qui ne fait que désafficher le lien. Tu dois revoir ta structuration.

OK mais cela fonctionne parfaitement avec Firefox, de plus c'est un prof qui m'a conseillé de faire de cette façon...

Avez vous un meilleur moyen ?

Salut,
Ajoute cela :

#liens a { background: url(/); }

A+

JoK a écrit :
OK mais cela fonctionne parfaitement avec Firefox, de plus c'est un prof qui m'a conseillé de faire de cette façon...

Je suis plus qualifié en CSS que la plupart de mes profs. Ou la totalité, peut-être. Sauf si on compte certaines valeurs sûres de ce forum (genre Laurent Denis, pour faire dans le balèse*) comme des "profs" informels

Sinon, Jok, c'est sympa les liens cryptiques mais là on se bat quand même un peu avec le pointeur de la souris pour tomber pile sur la zone active du lien... attention, tout le monde n'est pas champion de france de la coordination poignet-main-souris. Sans oublier ceux qui utilisent la souris malgré de légères (ou parfois sérieuses) difficultés à viser.
Enfin bref, à titre personnel j'aurais apprécié d'avoir le lien sur toute la zone texte + tache d'encre...

----
* Note: balèse signifie ici compétent. Pour l'autre signification, j'aurais plutôt pensé à Tristan Nitot
(houlà, je vais me faire des amis moi.........................)
Modifié par mpop (27 Feb 2006 - 21:45)

mpop a écrit :

Je suis plus qualifié en CSS que la plupart de mes profs. Ou la totalité, peut-être.

Oula j'espere que personne ne la mal pris


En tout cas l'astuce d'Alan fonctionne très bien ! J'aurais aimé comprendre la cause de ce probleme (j'essai de voir plus loin que le bout de mon nez meme si il est grnad quoi...).

De plus si vous avez de suggestion, cela serait avec plaisir.

Et bien sure un grand merci a vous !
Modifié par JoK (27 Feb 2006 - 21:47)

Deux choses :
- le coup du texte dans un span en display: none, c'est une bonne idée dans l'absolu, mais pas super en pratique. Disons que c'est bien pour Google, mais pas pour ceux qui utilisent un lecteur d'écran, dont on m'a dit qu'ils appliquent pour beaucoup d'entre eux les display: none ou visibility: hidden;
Ils devraient pas, mais ils le font. Donc voilà, c'est pas trop ça.

Il y a la technique du text-indent à -5000px, mais c'est pas parfait non plus. Ce qu'il nous faudrait, c'est du texte transparent

- un bout de ton code :

<ul id="liens">
	<[b]div[/b] id="lien0"><a href="news.html"><span>news</span></a></[b]div[/b]>
	<li id="lien1"><a href="groupe_membres.html"><span>groupe</span></a></li>
	<li id="lien2"><a href="concerts_venir.html"><span>concerts</span></a></li>
	<li id="lien3"><a href="media_audio.html"><span>media</span></a></li>
	<li id="lien4"><a href="liens.html"><span>liens</span></a></li>
	<li id="lien5"><a href="contacts.html"><span>contacts</span></a></li>
</ul>

Ça n'a peut-être rien à voir avec ton problème, mais autant corriger ça, non ?
Modifié par mpop (27 Feb 2006 - 21:51)

JoK a écrit :
Oula j'espere que personne ne la mal pris

Ils sont plus qualifiés que moi en gestion de projet, en PHP, dans pas mal d'autres domaines techniques, en expérience aussi bien sûr... donc non, je pense que ça ne leur pose pas de problème

JoK a écrit :
En tout cas l'astuce d'Alan fonctionne très bien ! J'aurais aimé comprendre la cause de ce probleme (j'essai de voir plus loin que le bout de mon nez meme si il est grnad quoi...).

Je suis aussi preneur pour plus de sources sur cet affaire.

mpop a écrit :
Deux choses :
- le coup du texte dans un span en display: none, c'est une bonne idée dans l'absolu, mais pas super en pratique. Disons que c'est bien pour Google, mais pas pour ceux qui utilisent un lecteur d'écran, dont on m'a dit qu'ils appliquent pour beaucoup d'entre eux les display: none ou visibility: hidden;

Voila c'etait pour un soucis d'accessiblité que cette facon de faire a été preconisé.

oups ce div je l'avais oublié
Modifié par JoK (27 Feb 2006 - 22:49)

Dans le tuto d'asla sur les info-bulles sans JS, on voit par exemple

a:hover {background: none; /* correction d'un bug IE */}

Seulement j'ai remarqué que ce genre de trucs pour résoudre ce bug d'IE ne marchait pas toujours, et parfois ça marchait mal (Comme si le curseur tremblotait, passant de la flèche à la main très rapidement.. bizarre !)

Finalement, la meilleure solution que j'ai trouvée est d'utiliser une image de fond, ou de faire semblant d'en utiliser une (le coup de slash). Là, dans tous les cas que j'ai testés ça fonctionne.

Il y a deux trois jours, j'ai vu un cas très bizarre (par ici ->Encore un probleme d'affichage dans ie ). Quelqu'un utilisait le même principe que les info-bulles, pour afficher des photos. Il y avait déjà une variante de « background none » sensée corriger le bug d'IE. Malgré cela la moitié de ses liens ne marchait pas .

J'ai donc essayé avec une image de fond, et là plus de problèmes, ça marchait.
Sauf que, ce qui était bizarre, c'est qu'il ne fallait rédiger que d'une façon, sinon IE faisait des siennes.

Ceci marchait très bien :

a {background-image:url(/);}
a:hover {background:url(/);}

Mais ceci ne marchait pas (le curseur réagissait bien, passait en type main/hover, mais aucun span ne s'affichait):

a {background:url(/);}
a:hover {background:url(/);}

Ca ne marchait pas non plus :

a {background-image:url(/);}
a:hover {background-image:url(/);}

et pas non plus :

a {background:url(/);}
a:hover {background-image:url(/);}

Et en laissant juste a:hover {background:url(/);}, alors là, rebellote, juste une partie marchait, comme au début.

Donc, allez comprendre pourquoi, seule la première combinaison marchait ! Amusant non ? (j'avais essayé également en mettant vraiment des images à la place du slash. Même résultat.)

On risque pas de s'ennuyer avec IE..
Modifié par Alan (27 Feb 2006 - 23:11)

Alan a écrit :
Donc, allez comprendre pourquoi, seule la première combinaison marchait ! Amusant non ? (j'avais essayé également en mettant vraiment des images à la place du slash. Même résultat.)

Hmm... peut-être que la deuxième propriété (avec :hover pour le sélecteur) devant venir "annuler" la première, IE préfère que l'on rajoute une couche de background (plus général que background-image) plutôt qu'une propriété de "même niveau". C'est une suggestion en l'air, et là seul le développeur qui a bossé sur cette partie du code pourrait nous dire comment IE gère les choses