Supperposition de DIV sous Internet Explorer 7 [Résolu]

Bonjour.

Malgré mes nombreuses recherches sur Google ou sur Alsacréation, je ne parviens pas à résoudre un problème de DIV.

Je cherche à avoir 3 "boites" d'une certaine largeur/hauteur et positionnées sur ma page. Dans chacune des boites, doit figurer un lien texte avec un changement de couleur au survol de la souris.

Jusque là, rien de bien méchant.

Cependant, le résultat est parfait sous FF mais sous IE, rien à faire, les liens ne sont pas cliquable (alors que le texte est sélectionable).

Ci-dessous la partie de mon code

<div id="carte1">
<div id="carte1_link">
<p><a href="chirurgiens_liste.php" class="a-blanc">Choisir<br />un chirurgien<br />qualifi&eacute;<br />en chirurgie<br />esth&eacute;tique<br />par fiche d&eacute;taill&eacute;e</a></p>
</div>
</div>

<div id="carte2">
<div id="carte2_link">
<p>Choisir<br />un chirurgien<br />qualifi&eacute;<br />en chirurgie<br />esth&eacute;tique<br />par d&eacute;partements</p>
</div>
</div>

<div id="carte3">
<div id="carte3_link">
<p>Choisir<br />un chirurgien<br />qualifi&eacute;<br />en chirurgie<br />esth&eacute;tique<br />par nom</p>
</div>
</div>

Et maintenant la partie de mon CSS

#carte1 {
	position:relative;
	/*position:absolute;*/
	width:180px;
	height:230px;
	right:0px; /*460*/
	top:300px; /*320*/
	left:450px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/carte_bleue.png', sizingMethod='crop');
	background:url('images/carte_bleue.png') !important;
	background:none;
	text-align:center;
	font-size:12px;
	line-height:12px;
	color:#FFFFFF;
	z-index:4;
}
#carte2 {
	/*position:relative;*/
	position:absolute;
	width:180px;
	height:230px;
	right:235px;
	top:320px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/carte_verte.png', sizingMethod='crop');
	background:url('images/carte_verte.png') !important;
	background:none;
	text-align:center;
	font-size:12px;
	line-height:12px;
	color:#FFFFFF;
	z-index:5;
}
#carte3 {
	/*position:relative;*/
	position:absolute;
	width:180px;
	height:230px;
	right:15px;
	top:320px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/carte_mauve.png', sizingMethod='crop');
	background:url('images/carte_mauve.png') !important;
	background:none;
	text-align:center;
	font-size:12px;
	line-height:12px;
	color:#FFFFFF;
	z-index:6;
}
#carte1_link {
	position:relative;
	margin-left:17px;
	padding-top:45px;
	*padding-top:35px;
	z-index:10;
}
#carte2_link {
	position:relative;
	margin-left:17px;
	padding-top:45px;
	*padding-top:35px;
	z-index:10;
}
#carte3_link {
	position:relative;
	margin-left:17px;
	padding-top:45px;
	*padding-top:35px;
	z-index:10;
}

Pouvez-vous m'aider à comprendre pourquoi cette superposition ne fonctionne pas sous IE et surtout m'aiguiller sur une solution viable ? (Attention : il est impératif que la page soit validée W3C).

Note : La propriété filter insérée dans mon CSS est un hack pour IE relatif à la transparence des PNG en background trouvé sur le site de Microsoft.
Modifié par nikkyken (27 Aug 2008 - 00:10)

Bonjour nikkyken et bienvenue ,

Ton problème de liens vient du filtre utilisé pour IE6.

2 choses :

Utiliser les commentaires conditionnels pour adresser une css spécifique à IE6 et garder la validité de ta css originale (cela permettras également de ne pas utiliser le hack !important).

Déclarer les liens de la partie concernée (dans cette même css spécifique) en "position relative" ce qui doit normalement corriger le bug.

Par contre attention, je crois me souvenir que si le bloc concerné est en position absolute cela risque de ne pas fonctionner mais c'est à vérifier.
Modifié par knarf (22 Aug 2008 - 06:26)

Bonjour.

Merci pour l'accueil et merci pour la réponse rapide knarf.

Effectivement, cela me conforte dans l'idée que sur Alsacréation, il y a un grand nombre de gens compétents et près à aider.

Tes conseils ont portés leur fruits, le résultat est parfait.

L'erreur venait du fait que je n'avais pas intégré le hack pour IE dans ma feuille de style spécifique à IE6. Une fois cette erreur corrigée, tout est rentré dans l'ordre.

Encore un fois, un grand merci pour l'aide et la réponse rapide.

Pour moi, le sujet est clos... Seulement, je ne sais pas comment le préciser sur le forum ! Encore un petit coup de main pour ça ?

Cliquer sur éditer de ton premier post, et marquer [Résolu] sur le titre du post.
Et... je crois que c'est tout

Hmmm...

Non, j'ai pas trouvé ! Modérateurs ? A vous de jouer

Merci encore pour tout !
Modifié par nikkyken (23 Aug 2008 - 10:30)

nikkyken a écrit :
Non, j'ai pas trouvé !

Pour chaque message que tu as écrit dans ce sujet, et du moment que tu es connecté, il devrait y avoir un bouton «Editer» en haut à droite. Il te suffit d'utiliser celui de ton premier message dans ce sujet, et de modifier manuellement le titre en rajoutant «[Résolu]», puis de valider.

Merci. En effet, je suis plutôt étourdi ! Je corrige cet erreur immédiatement.