28173 sujets

CSS et mise en forme, CSS3

Transparence puces .png sous IE

Bonjour,

Je suis actuellement confronté au problème suivant:

Je veux concevoir un menu vertical à l'aide de l'élément de liste ‹li›. Je souhaite y insérer des puces graphiques personnalisées au format ".png". Malheureusement (seul) Internet Explorer n'interprète pas la transparence. J'ai essayé les diverses méthodes citées sur ce forum qui permettent de remédier au problème mais sans succès. Ces dernières fonctionnent parfaitement avec les images mais n'ont aucune incidence sur les puces.

Espérant un éclaircissement de la part de quelqu'un...

Merci d'avance.
Bonjour,

Mettre la liste en list-style-type: none, donner aux items un padding-left approprié et replacer les puces en image d'arrière-plan, sur lesquels le filter IE pourra s'appliquer...
Bonjour,

Merci pour cet éclaircissement.
Cependant, j'ai un doute quant à la façon d'appliquer le filter IE.
Dois-je opter pour une classe appliquée à l'élément ‹li›?
Est-ce que l'emploi du filter IE sera un obstacle à la validité de ma page?

Par ailleurs, j'aimerais savoir s'il est possible, dans le cas d'une balise ‹img›, d'appliquer le filter IE via le code HTML? Si oui, quelles sont les valeurs à renseigner?

Merci d'avance.
Bonsoir et merci pour les liens.

Je cherchais une explication "synthétique" dans la masse de messages et celle de Laurent Denis m'a permis de bien progresser. Seulement, quelques problèmes subsistent: J'ai deux images qui se superposent. L'une transparente mais déformée (ce qui doit venir de la propriété "scale") et l'autre non transparente. De plus le lien qui suit n'est plus cliquable. Quelqu'un peut-il m'aider?

CSS

/* menu */

#menu {
	position: absolute;
	margin: 170px 0 0 50px;
	padding: 0;
	width: 180px;
}
#menu li {
	list-style-type: none;
	background-image: url(images/puce.png);
	background-repeat: no-repeat;
	background-position: 0% 65%;
	padding-left: 20px;
	line-height: 25px;
}
#menu a {
	color: black;
	text-decoration: none;
	font-size: 92%;
	font-variant: small-caps;
}
#menu a:hover {
	text-decoration: underline;
	color: maroon;
}

HTML

<ul id="menu">
			<li class="png"><a href="index.html">home</a></li>
			<li class="png"><a href="news.html">news</a></li>
			<li class="png"><a href="links.html">links</a></li>
</ul>

CSS Conditionnelle

.png {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/puce.png', sizingMethod='scale');
zoom: 1;
}
Bonsoir,

Je reste bloqué sur ce problème d'images qui se superposent...
Malgré divers essais, celle située au niveau de l'arrière-plan est toujours visible sous IE.
Quelqu'un peut-il m'apporter un élément de réponse? Merci d'avance.
Bonjour,

Désolé de persister dans mon monologue...
Toujours personne pour m'éclairer ou ayant rencontré un problème similaire?

Merci à l'âme charitable qui -peut-être- me répondra...
Ah! merci noklio!
Seulement mon problème de liens non-cliquables est déjà résolu.
Il reste ces deux images qui s'affichent l'une à côté de l'autre (dont une devrait être supprimée par la propriété "background: none")...
Toute aide est la bienvenue!
Modifié par Maskaram (27 Sep 2006 - 17:54)
Sujet clos
Aller à