Page 1 sur 1

Différence entre IE et FF ... comment régler ce petit soucis

Posté : 13 juin 2008, 22:53
par Sebe
Bonjour,

J'ai une petite question pour faire apparaître un message lors du survol d'un lien ... cela se passe ici.
Sous FF, j'ai reussi à faire apparaître un petit message lorsque que le visiteur laisse passe sur les liens (années) à gauche de la photo en faisant ceci:
$changement[$key]->annee = '<a class="result" href="' . $link . $list->participant_id 
				. '&annee=' . $list->annee . '">'
				. '<div>'. _CAT .': '. $list->lastname
				.'<br/>'. _CLUB .': ' . $list->club
				. '<br/>'. _DOS .': ' . $list->dossard .'</div>'
				. $list->annee . '</a>';
	}

Code : Tout sélectionner

<style type="text/css"> a.result { position:relative;} a.result div{display:none;} a.result:hover div{ display:block; position:absolute; left: 40px; top:1em; z-index:10; border:2px solid #ffffff; background-color:#000000; text-decoration:none; text-align:left; color:#ffffff; width:100px; padding:5px; } </style>
Mais le problème est que, sous IE6, j'ai rien du tout ... comment cela se fait-il ?

Merci

Posté : 13 juin 2008, 23:16
par Calimero
Bonjour,

Première chose à faire quand on a un problème HTML/CSS : valider son code (x)HTML. C'est par ici : http://validator.w3.org

Posté : 14 juin 2008, 02:56
par b.jerome
Juste pour signaler que sous IE7 sa fonctione, peut être que tu as résolu ton souci ?

Posté : 14 juin 2008, 08:28
par Sebe
Salut,
Première chose à faire quand on a un problème HTML/CSS : valider son code (x)HTML. C'est par ici : http://validator.w3.org
Ouai c'est vrai que je ne connaissais pas mais que dans le fond il ne valait mieux pas que je connaisse car il y a plus de 500 erreurs !
Problème est que ces erreurs sont pour la plupart dans le cms (Joomla) que j'emploie ... c'est quand même comme étant reconnu le meilleur, alors je ne sais pas quoi en penser :?:
Pour le reste, je ne trouve rien qui concerne cette fameuse boite par contre il y a des trucs que j'ai eu beaucoup de mal à mettre au point (dû à la méconnaissance en programmation) comme l'accessibilité aux non-voyant ... alors, j'ai encore plus de mal à savoir quoi en penser :?:
Juste pour signaler que sous IE7 sa fonctionne, peut être que tu as résolu ton souci ?
Non pas du tout ... en réalité, j'emploie IE6 mais seulement pour corriger les erreurs :?

Merci à vous deux

Posté : 14 juin 2008, 12:49
par Calimero
En validant le lien que tu donnes, je vois de mon côté 121 erreurs.

La très grosse majorité d'entre elles concerne l'utilisation de & (au lieu de &) dans les URL de la page. On ne doit jamais laisser un & tout seul dans le code source d'une page HTML. Il faudrait corriger si tu veux y voir plus clair dans les précieuses informations données par le validateur... Ceci dit, ce n'est pas ce qui explique ton souci.

Si tu recherches les quelques messages parmi les 121 qui ne ressemblent pas aux autres, tu trouveras celui-ci :
Line 277, Column 124: document type does not allow element "div" here;
Avec l'explication qui va bien. Corriger ce problème t'amènera notamment à modifier la règle CSS qui va avec et pour laquelle tu viens nous voir.

Posté : 14 juin 2008, 15:07
par Sebe
Après un peu de recherche, j'ai trouvé la ligne concerné:
$changement[$key]->annee = '<a class="result" href="' . $link . $list->participant_id 
				. '&annee=' . $list->annee . '">'
				. '<div>'. _CAT .': '. $list->lastname
				.'<br/>'. _CLUB .': ' . $list->club
				. '<br/>'. _DOS .': ' . $list->dossard .'</div>'
				. $list->annee . '</a>';
	}
Ce qui se traduit par http://www.kain-buyere.be/index.php?opt ... annee=2004
Si je comprend bien le message à coté, je ne peux pas mettre de balise <div> dans une <a> ... oui mais alors, comment dois-je faire ?

Merci

Posté : 14 juin 2008, 16:08
par Calimero
Tu peux au choix :
- remplacer le <div> par un élément en ligne (<span> par exemple)
- remplacer le <a> par un autre élément pouvant contenir un élément de bloc (par exemple un élément de bloc)
- sortir le <div> du <a>

Bref les solutions simples ne manquent pas...

L'important est que ça t'amène à revoir la règle CSS associée.