28172 sujets

CSS et mise en forme, CSS3

Bonjour,

je suis confronté à un problème d'affichage de puce.

En effet je n'arrive pas à attribuer à mes balises ul et ol le type "disc" de style de liste.
Avec mon code, je vois correctement les puces sous ie7 mais sous ie8 et firefox je ne vois rien du tout, comme si il ne comprenait pas la propriété list-style-type.
j'utilise également la feuille de style reset.css d'eric meyer pour réinitialiser mes styles.
Je vous joins le bout de mon code html et css ou je bloque.



<div class="encart_page">

	<p>Lorem Ipsum is simply dummy text of <strong>the printing</strong> and typesetting industry. Lorem<a href ="#" title="like Aldus">like Aldus PageMaker including versions of Lorem Ipsum.</a>
        </p>

	<h4>Titre de niveau 4</h4>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has</p>

	<ul>
		<li>Lorem Ipsum is simply dummy text</li>
		<li>Lorem Ipsum is simply dummy text</li>
		<li>Lorem Ipsum is simply dummy text</li>
	</ul>
</div>


Et le css :

.encart_page ul,.encart_page ol{
list-style-type:disc;
padding:0 0 0 20px;
margin:0;
}
.encart_page ul li{
display:block;
border:none;
padding:0;
margin:0;
}



Merci d'avance pour vos réponses !
Modifié par guizm0w (20 Apr 2010 - 13:03)
Salut Chok71,

Oui j'ai essayé cela ne change rien.

Je comprends vraiment pas d'où ca cloche, pourtant mon code n'est pas bien sorcier.
Je vérifie avec firebug mais toutes mes propriétés sont correctement appliqués. Smiley decu

Même en testant juste uniquement mon bout de code dans un fichier html ca n'affiche rien, c'est étrange tout de même.

Edit : Aparemment ca vient de mon display:block; sur les <li>, mais j'aimerais néanmoins le laisser actif.
Modifié par guizm0w (20 Apr 2010 - 12:59)
Supprime .encart_page ul,.encart_page ol{...} et re-essaie.

Sinon, dans ton CSS tu as mis ça : .encart_page ul,.encart_page ol, moi je ne vois pas de ol dans ton HTML.
Modifié par Chok71 (20 Apr 2010 - 12:57)
Oui car j'ai enlevé une partie de mon code, désolé.
Néanmoins j'ai trouvé d'ou cela venait.
La propriété display:block; sur les li cachait les puces.
J'ai donc attribué un display:list-item; et cela fonctionne à présent.

Merci de ton aide Smiley smile