Lien ne marche pas sous IE

Hello tout le monde,

Voici un problème sur lequel je tourne en round depuis quelques temps...
J'ai réalisé des minis blocs que l'on peut retrouver dans plusieurs pages sur le site en test : test.5francs.fr, ces blocs sont dans l'accueil (Mes dernières trouvailles) dans les pages de catégorie (liste des produits de la catégorie) et dans la page single (Dans la même catégorie).

Dans tous les navigateurs lorsque je clique n'importe où dans le bloc, je suis redirigé vers la bonne page, sous IE rien ne se passe...

J'ai cherché du côté des CSS et du JQUERY sans arrivé à trouver de raison particulière...

Le seul point que j'ai remarqué c'est que le lien fonctionne si on clique dans la partie basse (sous la photo)...

Si quelqu'un de connaisseur à des intuitions, des idées ou même une solution ! je suis tout oui et avide de savoir par quel bout prendre ce problème...

Merci d'avance

Juste pour aller plus vite avec le lien vers le site en test : 5francs

Un bout de code en question :

<a href="http://test.5francs.fr/produit/siege-acier-galva-style-tolix-2/?marque=5francs&amp;search=1" class="entry-content produit first">
	<div class="fadehover">
		<img width="172" height="198" title="p2-pliant1-appercuN" alt="p2-pliant1-appercuN" class="apercu-noir-et-blanc" src="http://test.5francs.fr/wp-content/uploads/2012/11/p2-pliant1-appercuN.jpg"><img width="172" height="198" title="p2-pliant1-appercu" alt="p2-pliant1-appercu" class="apercu" src="http://test.5francs.fr/wp-content/uploads/2012/11/p2-pliant1-appercu.jpg" style="opacity: 1;">	</div>
	<ul>
		<li><h4><p>Table acier galva</p>
</h4></li>
			<li class="brand-price">5francs - 200 €</li>
	</ul>
</a>

Le CSS lié :

#content a.entry-content.produit.first {
    margin-left: 0;
}
#content a.entry-content.produit {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #D0D0D0;
    float: left;
    font-size: inherit;
    height: 247px;
    margin: 14px 0 0 14px;
    padding: 0;
    width: 172px;
}
#content.produit .entry-content {
    color: #4B4B4B;
    float: right;
    font-size: 15px;
    height: 415px;
    margin-right: 30px;
    position: relative;
    width: 386px;
}
a[href], input[type="submit"], input[type="image"], label[for], select, button, .pointer {
    cursor: pointer;
}
a {
    color: #030303;
    text-decoration: none;
}

Le JS :

	$("body:not('.home') a.entry-content").hover(
		function() { // HOVER
			$(this).find("img.apercu").stop().animate({"opacity": "0"}, "fast");
			$(this).addClass("hover");
		},
		function() { // OUT
			$(this).find("img.apercu").stop().animate({"opacity": "1"}, "fast");
			$(this).removeClass("hover");
		}
	);
	
	$("body.home a.entry-content").hover(
		function() { // HOVER
			$(this).find("img.apercu-noir-et-blanc").stop().animate({"opacity": "0"}, "fast");
			$(this).addClass("hover");
		},
		function() { // OUT
			$(this).find("img.apercu-noir-et-blanc").stop().animate({"opacity": "1"}, "fast");
			$(this).removeClass("hover");
		}
	);

En espérant que cela vous aide

denis13 a écrit :
Juste pour aller plus vite avec le lien vers le site en test : 5francs

Un bout de code en question :

<a href="http://test.5francs.fr/produit/siege-acier-galva-style-tolix-2/?marque=5francs&search=1" class="entry-content produit first">
	<div class="fadehover">
		<img width="172" height="198" title="p2-pliant1-appercuN" alt="p2-pliant1-appercuN" class="apercu-noir-et-blanc" src="http://test.5francs.fr/wp-content/uploads/2012/11/p2-pliant1-appercuN.jpg"><img width="172" height="198" title="p2-pliant1-appercu" alt="p2-pliant1-appercu" class="apercu" src="http://test.5francs.fr/wp-content/uploads/2012/11/p2-pliant1-appercu.jpg" style="opacity: 1;">	</div>
	<ul>
		<li><h4><p>Table acier galva</p>
</h4></li>
			<li class="brand-price">5francs - 200 €</li>
	</ul>
</a>

En espérant que cela vous aide

Avec tous les éléments de type bloc dans un élément en ligne, je ne suis pas surpris que IE n'y arrive pas (mais ça dépend de la version, que tu n'as pas précisé).

ul li h4 et div dans un A, c'est un peu beaucoup, à voir sur : http://validator.w3.org/check?uri=http%3A%2F%2Ftest.5francs.fr%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

J'aurai dupliqué la balise lien dans chaque élément img et texte.
Modifié par iNCiTEWeb (21 Jan 2013 - 09:24)

A priori IE n'aime pas l'appel à la fonction zoom de ton fichier tripled.js, ligne 95.

$('.zoom').zoom();

La console IE renvoie une erreur : SCRIPT438: L’objet ne gère pas la propriété ou la méthode « zoom ». De même sous firebug (TypeError: $(...).zoom is not a function).
La bibliothèque qui la définit n'est pas incluse ? Et les autres navigateurs ignorent l'erreur sauf IE que ça fait planter ?

Tout d'abord merci à vous deux pour vos réponses .

PiR2 :
j'avais zappé le débuggueur de IE... je voyais plus un problème de CSS que de JS.
J'ai donc corrigé mon erreur (je ne chargeais l'api jquery zoom que dans les pages single...). Mais cela ne change rien au problème, par contre j'en ai corrigé un

iNCiTEWeb :
- J'ai IE9 sur mon poste et je change le mode via la Debug Bar (Document Mode).
Cela ne marche pas sur la version 7. La 8 et 9 sont ok.

- ul li h4 et div dans un A : ici j'ai voulu éviter d'ajouter des balises en plus des balises 'a' même si ce n'est pas w3c 'valide'. Je suis de toute façon coincé sur les api non valides que j'utilise et le fait que j'implémente les microformats de type : schema.org qui ne sont pas encore très acceptés...
Du peu que j'ai pu comprendre c'est plus un problème de position absolute, relative, de couche entre les calques. En effet si je retire la classe 'fadehover', la mise en page n'est plus la même (les images partent dans le coin gauche de l'écran), mais le lien fonctionne de nouveau...
J'ai tenté de mettre un z-index à 1000 sur mon 'a' mais ça ne change rien ...

Voici les css concernés :
pour le 'a' :

#content a.entry-content.produit {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #D0D0D0;
    float: left;
    height: 247px;
    margin: 14px 0 0 14px;
    padding: 0;
    width: 172px;
}
.fadehover {
    height: 198px;
    position: relative;
    width: 100%;
}
/* ici ca correspond à l'image en noir et blanc visible par défaut dans la home */ 
element.style {
    opacity: 1;
}
body.home img.apercu-noir-et-blanc {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 100;
}
/* ici ca correspond à l'image en couleur non visible par défaut dans la home */ 
body.home img.apercu {
    left: 0;
    position: absolute;
    top: 0;
}
img.apercu {
    z-index: 10;
}
a img {
    border: medium none;
}

Voili voilou, je continue quand même de mon côté à chercher , si vous avez une autre idée ou illumination faites moi savoir

Salut,

pour ma part j'ai toujours l'erreur js sous IE ce matin mais plus sous Firefox ; tu ne fais pas une inclusion conditionnelle liée au navigateur ?

Salut,

En fait j'ai oublié de commit sur le serveur... , j'avais fait mes corrections en local, la c'est bon sur le net

Sinon tu as une idée par rapport aux CSS ?

Alors ce que je peux te dire,

c'est que chez moi dans IE 9 le site s'affiche en mode de document : normes IE7 ; si je passe à la main le mode de document en normes IE9 le lien fonctionne sans pb.

Pour couper court à ce genre de pb j'ajouterai la balise meta :

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

qui oblige IE à rendre la page avec le moteur d'affichage le plus haut disponible.

Par contre je n'ai pas encore compris pourquoi il s'affiche dans ce mode sur mon pc.

PiR2 a écrit :
Alors ce que je peux te dire,

c'est que chez moi dans IE 9 le site s'affiche en mode de document : normes IE7 ; si je passe à la main le mode de document en normes IE9 le lien fonctionne sans pb.

Pour couper court à ce genre de pb j'ajouterai la balise meta :

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

qui oblige IE à rendre la page avec le moteur d'affichage le plus haut disponible.

Par contre je n'ai pas encore compris pourquoi il s'affiche dans ce mode sur mon pc.

Un tout petit mot de remerciement à PiR2 qui, avec ce commentaire, a corrigé mon problème d'onglets dans ce %#$@/" de IE....