28173 sujets

CSS et mise en forme, CSS3

Bonjour,
Je ne comprend pas pourquoi un de mes liens de fonctionne pas sur les images de mes produits sur le site ***.yogatapis.com.

Sur la page d'accueil ou les pages produits, le problème est le même :
voici la structure d'un bloc produit :


<table class="produits_demandes" summary="" cellpadding="0" cellspacing="0">
	<caption>Matériel de Yoga le plus demandé</caption>
	<tbody>
		<tr>
			<td>
				<a href="produit.php?parent_categorie=23&amp;categorie=28&amp;produit=198" title="Détails sur Tapis de Yoga ASHPOWER">
					<span class="titre_produit">Tapis de Yoga ASHPOWER</span>

					<span class="image_produit">
						<img src="images/produits/198/small/ASHPOWERBIS.jpg" alt="Photo du Tapis de Yoga ASHPOWER">
					</span>
				</a>
			</td>

			<td>
				<a href="produit.php?parent_categorie=23&amp;categorie=28&amp;produit=169" title="Détails sur le Tapis de Yoga DOLCE">
					<span class="titre_produit">Tapis de yoga DOLCE</span>

					<span class="image_produit">
						<img src="images/produits/169/small/DOLCE80.jpg" alt="Photo du Tapis de yoga DOLCE">
					</span>
				</a>
			</td>

			<td>
				<a href="produit.php?parent_categorie=26&amp;categorie=44&amp;produit=109" title="Détails sur l'Huile corporelle amincissante">
					<span class="titre_produit">Huile corporelle amincissante</span>

					<span class="image_produit">
						<img src="images/produits/109/small/WEIGHT-LOSS-BO-150-G.jpg" alt="Photo de l'huile corporelle amincissante">
					</span>
				</a>
			</td>
		</tr>
	</tbody>
	</table>


Ce code m'a l'air tout ce qu'il y a de plus standard...alors d'où vient le problème d'après vous ? une idée ?

Je sais que je peux pallier au problème en refaisant un lien autour de l'image seulement, mais je trouve pas ça clean.

De plus, le problème vient visiblement du style CSS, car lorsque je la désactive, l'image est bien cliquable. Voici donc les styles CSS appliqués à cette section :


#colonne_droite .produits_demandes {
margin:0 auto 15px auto;
text-align:center;
width:95%;
}

#colonne_droite .produits_demandes caption{
margin:auto;
display:none;
text-align:center;
}
#colonne_droite .produits_demandes td {
padding:10px;
width:25%;
}

#colonne_droite .produits_demandes td a {
color:#5F5F73;
cursor:pointer;
font-size:9pt;
font-weight:bold;
text-decoration:none;
}

#colonne_droite .produits_demandes td a .titre_produit {
background:url("../images/interface/fond_titre_liste_produits.png") top center no-repeat;
display:block;
margin:0;
padding:0 10px 0 10px;
}

#colonne_droite .produits_demandes td a .image_produit {
background:url("../images/interface/fond_image_liste_produits.png") bottom center no-repeat;
display:block;
height:78px;
width:140px;
}
#colonne_droite .produits_demandes td a img {
border:0;
margin-top:10px;
}
Je précise que ce problème a lieu uniquement sous IE, car sous Firefox l'image est bien cliquable...
Sous IE seule le titre de la page est cliquable et le '+' en bas de page.