[résolu] List-style-image & list-style: none;

Bonjour

Un petit problème CSS :

J'aimerai pouvoir utilisé des puces perso pour mes listes. Mais j'aimerai aussi parfois ne PAS les utiliser. Tout cela marche bien sur Firefox et IE8 mais en revanche les listes restent toujours personnalisés sur IE7 alors que je ne le souhaite pas (list-style: none;) .

Voici le résultat sur Firefox ou IE8 :


Voici le résultat sur IE7 :



voici le html :

<p><strong>Avec</strong> les puces personnalisés :</p>
	   <ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<ul>
				<li>1</li>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
			<li>4</li>
			<li>5</li>
		</ul>
		
		<p><strong>Sans</strong> puces :</p>
		<ul class="none">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<ul class="none">
				<li>1</li>
				<ul class="none">
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
			<li>4</li>
			<li>5</li>
		</ul>

voici le css :

        ul
		{
			list-style-image: url("puce.png");
		}

		ul ul 
		{
			list-style-image: url("puce2.png");
			
		}

		ul ul ul
		{
			list-style-image: url("puce3.png");
			
		}
		
		ul.none
		{
			list-style: none;
		}

Vous pouvez faire le test vous même à cette adresse.

Auriez vous une astuce pour corriger cela sur IE7 ?
Modifié par remus69 (27 May 2009 - 16:15)

Salut,

Le problème vient surtout que tes listes sont mal imbriquées.

<ul>
     <li>1</li>
     <li>2</li>
     <li>3
          <ul>
               <li>1
                    <ul>
                         <li>1</li>
                         <li>2</li>
                         <li>3</li>
                    </ul>
               </li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
          </ul>
     </li>
     <li>4</li>
     <li>5</li>
</ul>

Les éléments ul et ol ne peuvent contenir que des li.
Modifié par boulaneige (27 May 2009 - 15:39)

Oups désolé! Mais même en faisant cette correction, cela buggue toujours sur IE7 ...

Lien
Modifié par remus69 (27 May 2009 - 15:54)

Salut,

je ne sais pas trop pourquoi mais tu pourrais préciser mieux et faire

ul.none
{
	list-style-image: none;
}

Oui, mais dans ce cas, j'ai les puces par défaut qui réapparaissent (les puces noirs) !

Or je ne veux plus aucune puce.

ul.none
{
	list-style-image: none;
	list-style-type: none;
}

Bien vu!

Merci!