28220 sujets

CSS et mise en forme, CSS3

[Résolu] Pb avec image en Puce

bonjour j'ai un problème d'alignement d'une image que j'ai mis a la place d'une puce. Sur firefox, la puce se trouve bien aligné sur le texte mais sous ce #@!!:?# de IE, le petit icone est légèrement plus haut.

vous pouvez constater ca http://skalpl.free.fr/sisteer

le code pour cette balise est: 
#contenu li{
		text-align: justify;
		line-height: 1.5em;
		color:black;
		font-weight: normal ;
		list-style-image: url(images/puce.gif);
		margin: 1em 0 1em 1em;
		}


donc voila je sais que je chipote pour pas grand chose mais j'aime bien avoir des truc nickel donc merci si vous pouvez m'eclairer la dessus
Modifié par Sk4pis0 (15 Nov 2005 - 08:39)
Salut,

J'avais rencontré le même problème que toi et je l'avais contourné en utilisant 
 background-image:url(img/puce.gif);
 background-position: left;

à la place de 
list-style-image: url(images/puce.gif);

Je ne sais pas si ça te va, mais chez moi ça fonctionne en tous cas....
Smiley langue
Modifié par Cygnus (14 Nov 2005 - 16:28)
oui, la solution de Cygnus est bonne.
Pense aussi à ajouter un
padding-left:12px

correspondant à la largeur de ta puce (+ espaces) pour décaler le texte.
tu peux jouer aussi avec
 background-position:0% 55%;

pour le caler plus précisement.
Modifié par yyoupla (14 Nov 2005 - 16:38)
j'ai deja utilisé cette combin pour voir mais le probleme qui survient est que si le texte de ma puce fait plus d'une ligne, l'icone de la puce va se coller au meme niveau que l'entre-deux ligne.
Sk4pis0 a écrit :
j'ai deja utilisé cette combin pour voir mais le probleme qui survient est que si le texte de ma puce fait plus d'une ligne, l'icone de la puce va se coller au meme niveau que l'entre-deux ligne.

Bonjour,

Tu pourrais ajouter la propriété list-style-position.
Si tu définis une position "fixe" (mais relative à la taille du texte, comme ci dessous, la puce reste bien au niveau de la première ligne du menu :

		#contenu li{
		margin-left: 2.5em ;
		text-align: justify;
		line-height: 2em;
		color:black;
		font-weight: normal ;
		background:url(./images/puce.gif) 0 .7em no-repeat;
		padding-left:15px;
		list-style:none;
		}


Rmq : le padding seul est en px, puisqu'il dépend évidemment de la taille de la puce, et non pas de celle du texte
Modifié par yyoupla (14 Nov 2005 - 16:57)
Sujet clos
Aller à