[Résolu]IE me centre les puces verticalement ...

Hello !
J'ai bien effectué une recherche mais les nombreux topics sur le sujet ne m'ont pas beaucoup aidé.

j'ai une petite différence entre Ffox et IE (remarquez l'étoile qui doit etre au même niveau que le texte "Danger" et les petites puces qui doivent rester en face la première ligne de texte)
Voilà FFox:

Voilà IE qui aligne les puces verticalement au milieu de l'<ul></ul>:


List-style-position n'a servi à rien...
le code source html :

<ul>
<li class='puce00'>Danger !<ul>
<li class='puce01'>blabla.</li>
<li class='puce01'>blablablablablabla.</li>
<li class='puce01'>blablablabla</li></ul>
<li class='puce00'>blabla<ul>
<li class='puce01'>blablablablablabla</li>
<li class='puce01'>blablablabla</li>
<li class='puce01'>blabla</li></ul>
</ul>

Thanx

EDIT : ça sent l'erreur de débutant à plein nez !
Modifié par Ralfman68 (22 Jun 2006 - 21:18)

Bonjour !
(Ahah, je reviens éditer ça dans quelques instants ! )


Edit -- J'ai pu régler le problème, en modifiant le balisage, et un peu le CSS (les marges).

Voir le code source de cette page qui présente les deux exemples (le tiens, et un qui passe sous IE) : http://univers-fusco.com/tests/puce.php

La différence est essentiellement dans le balisage.

AVANT

<ul>
	<li class="puce1">Danger !
		<ul>
			<li class="puce2">blabla.</li>
			<li class="puce2">blablablablablabla.</li>
			<li class="puce2">blablablabla</li>
		</ul>
	</li>
	<li class="puce1">blabla
		<ul>
			<li class="puce2">blablablablablabla</li>
			<li class="puce2">blablablabla</li>
			<li class="puce2">blabla</li>
		</ul>
	</li>
</ul>

APRÈS

<ul>
    <li class="puce3">Danger !</li>	
    <li class="puce4">blabla.</li>
    <li class="puce4">blablablablablabla</li>
    <li class="puce4">blablablabla</li>
</ul>

<ul>
    <li class="puce3">blabla</li>	
    <li class="puce4">blabla.</span></li>
    <li class="puce4">blablablablablabla</span></li>
    <li class="puce4">blablablabla</li>
</ul>

Le décallage est réalisé en rajoutant une grosse marge à gauche dans la classe .puce4 ; j'ai supprimé la marge bas de la classe .puce3 (le pseudo titre).

li.puce3 {
	list-style-position: outside;
	margin: 50px 0px [#red]0[/#] 76px; [#orange]/* marge bas à 0 */[/#]
	width: 400px;
	text-align: justify;
	list-style-image: url(iconstar.png);
	font-weight: bold;
	}

li.puce4 {
	list-style-position: outside;
	margin: 5px 0 10px [#red]150px[/#]; [#orange]/* grande marde à gauche*/[/#]
	width: 380px;
	text-align: justify;
	list-style-image: url(puce.png);
	font-weight: normal;
	}

Edit -- 2
Qui nous expliquera la cause du problème d'affichage sous IE pour le premier code ?
Modifié par (20 Apr 2006 - 14:45)

Super ça marche! merci

Ralfman68 a écrit :
Super ça marche! merci

Bonjour,Je suis nouveaux sur ce forum raf j'ai vue tes création magnifiques ce que je pourrait te contactez sur msn ??
Car j'ai un site D'aide Informatique et je voudrait l'améliorré si tu pouvait m'aider a l'améliorré j'en serait ravis Merci et très bonne journée a tous