28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'espace entre puce-image et texte

Bonjour à tous,

j'ai un p'tit souci avec une liste de puce...

.puce-jaune {
	list-style-image: url(images/puce_jaune.gif);
	list-style-position: inside;
}
.puce-jaune li{
	text-indent: 10px;
	border: 1px solid white;
}

Sous Firefox, c'est nickel, y a 10px avant et après la puce.
Sous IE6, y a bien 10px avant mais pas entre la puce et le texte ! Smiley fache

Y a un autre truc a ajouter ?

Merci d'avance
@+ Smiley cligne
Modifié par Tchupacabra (24 Oct 2005 - 17:04)
Merci Raphael... Smiley confused désolé pour la non recherche. Smiley langue
Malheureusement, je n'arrive pas à appliquer l'astuce de la FAQ.
Revoici mon bout de code :
.puce-jaune {
	list-style-image: url(images/puce_jaune.gif);
	list-style-position: inside;
}
.puce-jaune ul {
	margin-left: 0px;
	padding-left: 20px;
}
.puce-jaune li {
	border: 1px solid white;
}

Donc pour le debugg, j'utilise un cadre blanc...

Dans IE6 et Firefox, mes lignes de textes sont bien à 20 px du cadre blanc.
Sauf que :
- dans FireFox, la puce est collée au cadre
- dans IE6, la puce est collée au texte.

J'ai essayé de bidouiller dans tous les sens mais rien ne fonctionne.... Smiley bawling
salut,

y a rien d'exceptionnel dans mon code.... mais bon le voilà :
<table><tr valign="top">

	<td class="clipart">
		<img src="../images/monImage.gif" alt="MonImage" width="61" height="59" />
	</td>
	
	<td>
	<ul class="puce-jaune">
		<li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li>
		<li>BBBBBBBBBBBBBBB</li>
		<li>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCc</li>
		<li>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</li>
	</ul>
	</td>

</tr></table>


avec :
td {
	border: 1px solid blue;
}
td.clipart {
	width: 100px;
}


L'inside permet d'avoir mes puces dans mon second td.

@+
Donc il y a bien une erreur :

ul .puce-jaune{
margin-left: 0;
padding-left: 20px;
}


Et non :

.puce-jaune ul {
margin-left: 0px;
padding-left: 20px;
}

Tu peux même tout mettre :

.puce-jaune {
list-style-image: url(images/puce_jaune.gif);
list-style-position: inside;
margin-left: 0;
padding-left: 20px;
}

A moins que tu ais des listes imbriquées, ce qui n'a pas l'air d'être le cas.

Ensuite, je crois que les tirets dans le nom des classes où identifiants n'est pas très recommandé, à confirmer.

Smiley smile
Bah apparemment, rien n'a changé.... Smiley bawling
Avec IE6, mon texte est toujours collé à la pucejaune contrairement avec FireFox.

J'ai aussi enlevé le tiret de puce-jaune.
Oups, je suis désolé, en fait j'ai pas trop bien regardé ton code, il faut mettre le padding-left dans le <li> et non dans <ul>

.puce_jaune {
list-style-image: url(images/puce_jaune.gif);
margin-left: 0;
}

.puce_jaune li{
padding-left: 20px;
}

Mais avec IE le fait de mettre position: inside annule le padding, pourquoi ????

Normalement, cela devrait fonctionner.
Mais pour mettre la puce dans la cellule adjacente, je vois pas trop comment faire.
A moins d'une position absolute.
Faudrait savoir... .puce_jaune li {} ou li .puce_jaune {} ! donc ma syntaxe était bonne... Smiley langue

J'aimerais tout simplement avoir ma puce contre le bord gauche de mon td et mon texte à 20px de ce bord ! C'est tout... Smiley confus
c'est bon j'ai trouvé ! Smiley lol 
.pucejaune {
	list-style-image: url(images/puce_jaune.gif);
	margin-left: 20px;
}
.pucejaune li{
	padding-left: 0px;
}

donc fallait enlever list-style-position: inside;....

@+ et merci à tous !

Smiley cligne
Tchupacabra a écrit :
Faudrait savoir... .puce_jaune li {} ou li .puce_jaune {} ! donc ma syntaxe était bonne... Smiley langue

Oui, désolé de t'avoir embrouillé, j'étais parti sur le fait que tu avais mis .puce_jaune ul Smiley biggol

Content que ton problème soit résolu Smiley smile
Sujet clos
Aller à