Affichage de puce sur IE

Affichage de puce sur IE - HTML/CSS - Programmation

Marsh Posté le 06-12-2006 à 10:15:20    

Coucou à tous,
 
Je fais une liste de puces sur mon site, et j'utilise Firefox...
ce matin j'ai eu la mauvaise idée de regarder avec IE ce que donnait mon site !
C'est une catastrophe...
 
J'utilise une puce perso avec

Code :
  1. <li style="list-style-image:url(images/puce.gif)">


 
Il n'y a pas d'espace entre la puce et le texte, je suis donc obligé de mettre &nbsp; à chaque fois, ce qui fait un double espace sur Firefox.
 
Lorsque je fais des listes personnalisées, il utilise ma puce personnalisée à chaque fois. Mon code est le suivant :

Code :
  1. <ul>
  2.    <li style="list-style-image:url(images/puce.gif)">&nbsp;<a href="http://www.projectioncinema.com">Projections en intérieur</a></li>
  3.             <ul type="circle">
  4.                   <li>Avant-première de films</li>
  5.                   <li>Ciné drive-in</li>
  6.             </ul>
  7. </ul>


et il m'affiche la puce personnalisée par tout !
J'ai essayé de mettre le type="circle" dans la balise <li>, mais ça ne change rien...
Bouhhh
 
ça doit être un truc tout bête, mais là je sèche.
 
Merci d'avance.
 
Pierrick

Reply

Marsh Posté le 06-12-2006 à 10:15:20   

Reply

Marsh Posté le 06-12-2006 à 10:47:12    

Salut à toi,

 

Voyons cela :

 

Pour l'espace, je pense que tu peux régler ça avec des CSS plutôt que des  &nbsp; ... par coeur je ne vois pas (sûrement des paddings etc), va voir du côté des recommandations W3C en la matière ...

 

En revanche pour ton deuxième problème : essaye un peu le code suivante pour ta <ul> interne :

Code :
  1. <ul style="list-style-type:none">


(le list-style-type se définit au niveau de l'ul, pas du li : http://www.w3schools.com/css/pr_list-style-type.asp)

 

Le plus propre encore étant de définir les styles dans l'entête de ta page (fût-ce avec une belle page CSS incluse) où tu définis des classes du genre :

Code :
  1. <head>
  2. <style>
  3. ul.menu
  4. { list-style-image:url(images/puce.gif);
  5.   padding-left : 5pt;  // à confirmer, je sais pas ce que ça donnera :)
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. (...)
  11. <ul class="menu">
  12. <li> tralala
  13. <ul>  <li> sous point 1
  14.         <li> sous point 2
  15. </ul>
  16. </ul>
  17. //etc.
  18. </body>
 

*edit* Possible aussi que le problème vienne de l'endroit où tu mets ta balise fermante "</li>" .. Comme celle-ci n'est pas obligatoire (peut-être que le W3C validator l'exige, je me souviens plus, mais les browsers n'en ont pas besoin), essaye sans ;)

Message cité 1 fois
Message édité par ZeBix le 06-12-2006 à 10:50:43
Reply

Marsh Posté le 06-12-2006 à 11:21:48    

Merci Zebix, mais rien à faire ! IE n'en fait qu'à sa tête !
Si je rajoute la ligne de commande list-style-type:none ça ne marche pas.
Et en plus si je met mon list-style-type dans la balise <ul> même sur Firefox il me met la même puce partout !
Et en plus je cherche partout sur les moteurs de recherche liste de puce personnalisée, et rien ne propose des listes hiérarchisées mixtes... Je ne peux pas croire que je suis le seul à avoir ce pb !

Reply

Marsh Posté le 06-12-2006 à 11:31:48    

Pour le test voici mon code le plus simple possible :
<ul>
   <li style="list-style-image:url(images/puce.gif)">&nbsp;<a href="http://www.projectioncinema.com">Projections en intérieur</a></li>
            <ul>
                  <li>Avant-première de films</li>
                  <li>Ciné drive-in</li>
            </ul>
</ul>
 
Si je le colle dans une page html. Si j'ouvre cette page  
avec Firefox, j'ai
http://www.hallucine.fr/test/firefox.jpg
Sur IE
http://www.hallucine.fr/test/ie.jpg
 
Vous pouvez tester ici : www.hallucine.fr/test/test.html
 
Pourquoi donc cela ne veut-il pas marcher pareil chez les 2 navigateurs ?
 
Merci de votre aide...
 
Pierrick

Reply

Marsh Posté le 06-12-2006 à 11:38:54    

Re,

 

tu n'as pas lu correctement mon post et/ou l'article linké.

 

Ce code fonctionne je viens d'essayer :

 
Code :
  1. <ul style="list-style-image:url(bullet.gif)">
  2.    <li>&nbsp;<a href="http://www.projectioncinema.com">Projections en intérieur</a></li>
  3.             <ul style="list-style-image:none">
  4.                   <li>Avant-première de films</li>
  5.                   <li>Ciné drive-in</li>
  6.             </ul>
  7. </ul>
 

(remplace par le correct url pour ton image)

 

Il est vrai cependant que ça ne change rien d'utiliser une "class" pour ton UL "mère", puisque tu IE a l'air de considérer que les ul "filles" héritent d'office des caractéristiques de leur parent ... haaa IE et les recommandations ;) .. bref tu dois spécifiquement déterminer pour l'UL "fille" quel style tu veux, en rapport avec celui déterminé pour la mère.

 

*EDIT* j'en ai profité pour checker l'espace entre la puce et ton texte : utilise ceci :

 
Code :
  1. <li style="padding-left:5pt";>


au lieu de

Code :
  1. <li>&nbsp;
 

(et ici, le style se cantonne à ce LI en particulier et pas à ceux "en dessous", ce qui est logique puisqu'ils ne sont pas "inclus" dedans.)


Message édité par ZeBix le 06-12-2006 à 11:46:54
Reply

Marsh Posté le 06-12-2006 à 12:21:36    

Un gros Bisous à Zebix !
ça marche nickel !
Je suis vraiment désolé je ne sais pas où j'avais foiré sur mes tests, j'étais persuadé d'avoir bien fait ! Honte sur moi !
 
++

Reply

Marsh Posté le 06-12-2006 à 16:35:34    

le css dans les balises c'est mal


---------------
dH Design - Spécialiste en standards web et en accessibilité
Reply

Marsh Posté le 07-12-2006 à 09:41:57    

hauhazice a écrit :

le css dans les balises c'est mal

 
ZeBix a écrit :

Le plus propre encore étant de définir les styles dans l'entête de ta page (fût-ce avec une belle page CSS incluse)

 

on se répète, par ici ;)


Message édité par ZeBix le 07-12-2006 à 09:42:43
Reply

Marsh Posté le 07-12-2006 à 12:05:16    

Ah oui, pas vu :D


Message édité par hauhazice le 07-12-2006 à 12:05:37

---------------
dH Design - Spécialiste en standards web et en accessibilité
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed