Effets secondaires du filtre AlphaImageLoader en cas de positionnement absolu

Test conçu et rédigé par Frank Galey.

Màj: 7 février 2009

Ce mini tutoriel est un complément de l’article sur Alsacréations: Obtenir la transparence PNG avec Internet Explorer 6.

Pour rappel :

Le filtre AlphaImageLoader a plusieurs effets secondaires. Le principal est que le texte à l'intérieur d'un élément sur lequel on a appliqué le filtre n'est plus sélectionnable, les liens plus cliquables, etc. Cela se corrige généralement en passant le texte ou les liens en positionnement relatif (mais cela peut être un peu plus subtil et il y a des cas particuliers assez retors).

Un de ces cas particuliers est le positionnement de l'élément conteneur en position absolue.

1 — Elément sans positionnement spécifique (position: static, par défaut)

L'élément (ul) n'est pas positionné, l'application de la position relative aux liens du menu fonctionne et les liens sont cliquables.

Code html :

<ul id="static">
	<li><a href="#">Lien 1</a></li>
	<li><a href="#">Lien 2</a></li>
	<li><a href="#">Lien 3</a></li>
	<li><a href="#">Lien 4</a></li>
</ul>

Code css :

/* Code général */

ul#static {
	width: 80px; /* Permet d'obtenir le layout sur l'élément */
	height: 90px;
	margin:0;
	padding:20px 0 20px 50px;
	background: url(logo-alsa.png) no-repeat;
}

/* Code spécifique IE6 (et inférieur) à insérer via les commentaires conditionnels */

ul#static {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="logo-alsa.png", sizingMethod="crop");
}

ul#static a {
	position: relative;
}

2 — Elément positionné en absolu

L'élément (ul) est positionné, l'application de la position relative aux liens ne fonctionne plus: ils ne sont pas cliquables.

Code html :

<ul id="absolu">
	<li><a href="#">Lien 1</a></li>
	<li><a href="#">Lien 2</a></li>
	<li><a href="#">Lien 3</a></li>
	<li><a href="#">Lien 4</a></li>
</ul>

Code css :

/* Code général */

ul#absolu {
	position: absolute;
	width: 80px;
	height: 90px;
	top:0;
	left:0;
	margin:0;
	padding:20px 0 20px 50px;
	background: url(logo-alsa.png) no-repeat;
}

/* Code spécifique IE6 (et inférieur) à insérer via les commentaires conditionnels */

ul#absolu {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="logo-alsa.png", sizingMethod="crop");
}
ul#absolu a {
	position: relative;
}

3 — Solution

La solution est de ne pas appliquer le filtre à l'élément positionné.

Il faut donc dans un premier temps créer un élément supplémentaire positionné sans le filtre.

Dans un second temps, y placer l'élément (ul) recevant le filtre et appliquer la position relative sur les liens.

Code html :

<div id="positionnement">
	<ul>
		<li><a href="#">Lien 1</a></li>
		<li><a href="#">Lien 2</a></li>
		<li><a href="#">Lien 3</a></li>
		<li><a href="#">Lien 4</a></li>
	</ul>
</div>

Code css :

/* Code général */

#positionnement {
	position: absolute;
	top: 0;
	left: 0;
}
#positionnement ul {
	width: 80px; /* Permet d'obtenir le layout sur l'élément */
	height: 90px;
	margin: 0;
	padding: 20px 0 20px 50px;
	background: url(logo-alsa.png) no-repeat;
}

/* Code spécifique IE6 (et inférieur) à insérer via les commentaires conditionnels */

#positionnement ul {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="logo_alsa.png", sizingMethod="crop");
}
#positionnement ul a {
	position: relative;
}

Notes complémentaires :