[Résolu] Firefox n'affiche pas correctement les icones des LI

Sous IE les icones des LI sont à leur place mais Firefox lui ne respecte pas les margins/padding des parents.

<div style="border:1px dashed gray;padding:10px;">
<ul class="links">
<li class="linkDoc"><a href="#">.doc</a><br>Abstract</li>
<li class="linkXls"><a href="#">.xls</a><br>Abstract</li>
</ul>

Le CSS :

ul.links{padding:0;margin:0}
ul.links li{list-style-type:none;margin-left: 14px}
li.linkDoc{list-style-image:url(doc_14x14.gif)}
li.linkXls{list-style-image:url(xls_14x14.gif)}

Peut on corrigé ce bug ?


Une illustration du problème montrée avec Firebug :

Modifié par Grumelo (18 Jun 2007 - 10:59)

Heu... pas compris le problème pour ma part.

Il faut soit un padding-left non nul, soit un margin-left non nul, mais l'un des deux est nécessaire pour l'affichage des marqueurs de listes.

L'apparence de résultat correct dans IE est lié à un autre défaut de la CSS, l'un compensant l'autre; le comportement de FF est normal.

sinon, autre solution plus robuste: un background-image remplaçant le list-style-image permettra de maîtriser plus aisément l'emplacement des icônes. Dans ce cas, c'est le padding-left du a ou du li qui sera utilisé.
Modifié par Laurent Denis (07 Jun 2007 - 15:17)

Mais j'ai défini un margin-left ?!

Tu parles d'un margin/padding au niveau du <li> ou du <ul> ?

Pour le <li> il y en a bien un.

La solution avec l'image en background je la connais bien mais elle a d'autres inconvenients comme le positionnement vertical de l'image en cas de resize du texte.

Florent V. a écrit :
Heu... pas compris le problème pour ma part.

Sur l'image en exemple les icones ne devraient pas se trouver hors de la zone bleu claire.
Modifié par Grumelo (07 Jun 2007 - 16:14)

Salut,

As-tu lu ce point de la FAQ ?

Pour le positionnement des images de fond en fonction de la taille du texte, je ne vois pas où est le problème. Tu peux positionner l'image de fond dans les CSS

Oui, merci pour les liens.

Mais hélas cette doc n'est pas tout à fait complète.
Si on remplace les puces par défaut par sa propre image il faut tenir compte de deux paramètres:
* la largeur de l'image
* l'espace qui vient aprés.

Dans IE il n'y a pas d'espace autour de la puce.
Donc si je défini une marge gauche de 14px avec un puce de 14px mon texte sera collé à droite de la puce.

Malheureusement sous Firefox il y a cette espace de 8px à droite dont on ne peut se défaire.

Donc pour obtenir rigoureusement la même chose sous IE et Firefox j'utilise :

ul.links{padding-left:14px;margin:0}
ul.links li{list-style-type:none;margin:0;padding-left:8px}
* > ul.links {padding-left:22px}
* > ul.links li{padding-left:0}

Ce qui me donne:


Et donc l'espace à droite de mon image est hélas fixée à 8px.

Please, dites moi que je me trompe et qu'on peut faire plus simple.
Modifié par Grumelo (07 Jun 2007 - 17:17)

Il y a un truc qui m'échappe dans tes padding & margin

Personnellement, je ferais comme ceci :

ul.links {
   margin: 0;
   padding: 0;
   list-style: none;
}
ul.links li {
   padding-left: 18px; /* en fonction de la taille de l'image */
   background: url(image.png) 0 center no-repeat;
}

Thomas D. a écrit :
Il y a un truc qui m'échappe dans tes padding & margin

Personnellement, je ferais comme ceci :

ul.links {
   margin: 0;
   padding: 0;
   list-style: none;
}
ul.links li {
   padding-left: 18px; /* en fonction de la taille de l'image */
   background: url(image.png) 0 center no-repeat;
}

Cette technique est celle avec une image en background.
C'est une bonne méthode mais avant de m'y résoudre je préfèrerais trouvé une solution en concervant l'image dans la puce.

Libre à toi, si tu veux te casser la tête

Peut-être qu'il faut chercher du côté de

list-style-position: outside|inside;

alors ...

La technique d'utiliser une image en background d'un <li> a un énorme désavantage.
Si l'image est centrée verticalement la puce n'est plus à la bonne place dans le cas ou le <li> a plusieurs lignes.

C'est donc bien la technique qui consiste à remplacer la puce par défaut qui est la bonne.

Voici un exemple de ce que ça donne quand il y a plusieurs lignes et que le texte est très gros :



Voici donc le code "correct" pour customizer les <li> :

ul.links{padding-left:14px;margin:0}
ul.links li{list-style-type:none;margin:0;padding-left:8px}
* > ul.links {padding-left:22px}
* > ul.links li{padding-left:0}
li.linkDoc{list-style-image:url(doc_14x14.gif)}
li.linkEmail{list-style-image:url(email_14x14.gif)}
li.linkMpp{list-style-image:url(mpp_14x14.gif)}
li.linkNsf{list-style-image:url(nsf_14x14.gif)}
li.linkPdf{list-style-image:url(pdf_14x14.gif)}
li.linkPpt{list-style-image:url(ppt_14x14.gif)}
li.linkProfile{list-style-image:url(profile_14x14.gif)}
li.linkSwf{list-style-image:url(swf_14x14.gif)}
li.linkVideo{list-style-image:url(video_14x14.gif)}
li.linkVsd{list-style-image:url(vsd_14x14.gif)}
li.linkXls{list-style-image:url(xls_14x14.gif)}
li.linkZip{list-style-image:url(zip_14x14.gif)}
li.link{list-style-image:url(default_14x14.gif)}
li.linkBacktotop{list-style-image:url(backtotop_14x14.gif)}

Modifié par Grumelo (13 Jun 2007 - 14:19)

Si vous êtes d'accord avec cette solution alors je propose de [Résoudre] ce topic

Grumelo a écrit :
La technique d'utiliser une image en background d'un <li> a un énorme désavantage.

Un "énorme" désavantage très facilement contournable en positionnant le background depuis le haut et en em pour qu'il suive la 1ère ligne de texte.

<nicolas> a écrit :


Un "énorme" désavantage très facilement contournable en positionnant le background depuis le haut et en em pour qu'il suive la 1ère ligne de texte.

Tu as un exemple concret ? Un code CSS à proposer ?

Grumelo a écrit :
Tu as un exemple concret ? Un code CSS à proposer ?

Ben tu teste, c'est pas bien méchant.

Non pas de code css à proposer désolé.

Mais c'est la propriété background-position si jamais. Et si on connaît pas, y'a sûrement plein de réponse ici
Modifié par <nicolas> (13 Jun 2007 - 16:29)

Inconvenient avec une image de fond dans le <li>:

* En cas d'impression l'image peut disparaitre si l'option imprimer background image n'est pas activée
* Si le text est plus petit que l'image, en taille smallest par exemple, l'image est coupée.
* L'alignement de l'image n'est pas évident en fonction de la taille du text.



Le code CSS pour une image de fond dans un li :

ul.links{padding:0;margin:0}
ul.links li{list-style-type:none;margin:0;padding-left:18px;list-style-image:none;}
ul.links li.linkDoc{background:url(doc_14x14.gif) no-repeat left 0.2em}
ul.links li.linkEmail{background:url(email_14x14.gif) no-repeat left 0.2em}
ul.links li.linkMpp{background:url(mpp_14x14.gif) no-repeat left 0.2em}

Je recommande donc de customiser le list-style-image plutôt que de jouer avec une image de fond.
Modifié par Grumelo (14 Jun 2007 - 10:13)

Grumelo a écrit :
* En cas d'impression l'image peut disparaitre si l'option imprimer background image n'est pas activée

Les images aussi peuvent être désactivées. Par contre rien n'empèche de réactiver les puces dans une css print.

Grumelo a écrit :
* Si le text est plus petit que l'image, en taille smallest par exemple, l'image est coupée.

Un min-height sur les li? Et à mon avis, le zoom texte est plutôt utilisé par aggrandir que pour réduire non?

Grumelo a écrit :
* L'alignement de l'image n'est pas évident en fonction de la taille du text.

Avec une position en em, on arrive assez rapidement à quelque chose de satisfaisant.


Personnellement, j'utilise toujours les background-images car je trouve que cela laisse une plus grande liberté et pose moins de problème avec les marges internes et externes. Mais ça reste un seul avis parmi tant d'autres.

<nicolas> a écrit :

Les images aussi peuvent être désactivées. Par contre rien n'empèche de réactiver les puces dans une css print.

Un min-height sur les li? Et à mon avis, le zoom texte est plutôt utilisé par aggrandir que pour réduire non?

Si ton browser à l'option Impression des Images de fonds désactivée aucun CSS ne te permettra de les imprimer.

Min-height n'est pas reconnu par tous les browsers. Et il a lui aussi des désagréments.
Modifié par Grumelo (14 Jun 2007 - 12:19)