[RESOLU] Bug liste à puce internet explorer

Bonjour à tous,
Je débute en CSS et j'ai un problème pour afficher une image à la place d'une puce (que sur ie)
voici le code html :

<ul>
<li id="sdz">
<a href="http://www.siteduzero.com/" target=_blank>Site du Zéro </a>
</li>
<li id="zdnet">
<a href="http://www.zdnet.fr/" target=_blank>Zdnet </a>
</li>						
</ul>

voici le code CSS :

#siteutile ul
{
	margin-left:30px;
}
#sdz
{
	list-style-image:url("../images/favicon_sdz.ico");
}

#zdnet
{
	list-style-image:url("../images/favicon_zdnet.ico");
}

Lien vers les images du problème :

http://img21.imageshack.us/img21/7664/listefirefox.png
http://img690.imageshack.us/img690/8154/listeie8.png

Merci pour vos futures réponses
Modifié par jbay (01 Mar 2010 - 09:10)

Hello jbay et bienvenue,

la propriété list-style-image étant limitée on préconise plutôt d'utiliser background-image :

ul {
	margin: 0 0 0 30px;
	padding: 0;
	list-style: none;
}

ul li {
	padding-left: 30px;
}

#sdz {
	background: url('../images/favicon_sdz.ico') top left no-repeat;
}
	
#zdnet {
	background: url('../images/favicon_zdnet.ico') top left no-repeat;
}

<ul>
	<li id="sdz"><a href="http://www.siteduzero.com/">Site du Zéro </a></li> 
	<li id="zdnet"><a href="http://www.zdnet.fr/">Zdnet </a></li>                         
</ul> 

Au passage :
* lire cette astuce
* pourquoi utiliser target=_blank (qui devrait d'ailleurs être noté target="_blank") et ne pas laisser les visiteurs libres d'ouvrir ou non la page dans un nouvel onglet ?

Salut Heyoan,

Merci de ta réponse rapide

Malheureusement j'ai appliqué ton code et j'ai toujours le même problème, on dirait que les les puces sont "zoomées" sur ie
j'ai réessayé avec le favicon d'alsacréations :

http://img109.imageshack.us/i/ffetie8.png/

(à gauche ff et à droite ie8)


Peut être à cause des div ?

#siteutile
{
	margin-top:10px;
	margin-left:10px;
	margin-right:10px;
	border-width:1px;
	border-style: solid;
	border-color: #000000;
}

#siteutile ul { 
   margin: 0 0 0 30px;
    padding: 0; 
    list-style: none; 
} 
 
#siteutile ul li { 
    padding-left: 30px; 
} 


#sdz
{
	background:url('../images/favicon_sdz.ico') top left no-repeat;
}


#zdnet
{
	background:url('../images/favicon_zdnet.ico') top left no-repeat;
}

#alsa
{
	background:url('../images/favicon_alsacreations.ico') top left no-repeat;
}

#colonne2
{
	width:20%;
	float : right;
	background-color : white;	
	height:760px;
}

Sinon j'avais mis target=_blank pour que les utilisateurs reste sur ma page pendant la visite d'un autre site, cet attribut ne s'utilise plus ?

Target=_blank donne au webmaster l'impresssion de "garder" son visiteur. Or ce genre de choses n'est pas très ergonomique car il ne laisse pas la liberté à l'utilisateur d'ouvrir la page où il veut - et l'utilisateur sait très comment revenir en arrière ou comment ouvrir vers une autre fenêtre.

jbay a écrit :
Malheureusement j'ai appliqué ton code et j'ai toujours le même problème, on dirait que les les puces sont "zoomées" sur ie

Alors essaie de ne pas utiliser un .ico mais une autre extension (png, gif, jpg).

jbay a écrit :
Sinon j'avais mis target=_blank pour que les utilisateurs reste sur ma page pendant la visite d'un autre site, cet attribut ne s'utilise plus ?

Si il s'utilise (avec un doctype Transitional mais pas avec un Strict). Pour aller plus loin lire cette astuce.
Modifié par Heyoan (26 Feb 2010 - 18:46)

Merci Heyoan ça marche