[CSS 2.1] IE 6 et 7 : pas de puce pour une liste en float [Résolu]

[FixSan]

Bonjour,

Sur cette page de mon projet actuel, en bas, se trouve une liste non-ordonnée (les tags "dès 3 ans", "dès 4 ans", etc.) dont les éléments sont positionnés en float:left.
Du coup, IE 6 et 7 n'affichent pas les puces...

J'ai tenté pas mal de contournements parmi les pratiques habituelles (du genre "display: inline-block;" sur ul, etc.), en vain.

Quelqu'un aurait-il une idée ? Merci d'avance !

[Ceddoc]

Tu as essayé de ne pas spécifier le type de puce vu que c'est le choix par défaut que tu veux?

[Bisûnûrs]

Hop :
http://www.developpez.net/forums/d10...left-sous-ie7/

J'en avais vu passer d'autres sur le sujet, mais je ne les retrouve plus.

Il s'agit en somme d'un bug de IE qui a été corrigé dans IE8.
Une autre explication en anglais ici :
http://venutip.com/content/disappearing-bullets-ie

[FixSan]

Pardon, j'aurais dû préciser : j'ai déjà rencontré ce bug (forcément...), et je sais qu'une solution consiste à utiliser une image de background. Néanmoins, c'est plus un contournement qu'une solution. Je souhaiterais donc, si c'est possible, l'éviter.

Habituellement, dans ce cas, j'arrive à m'en sortir en jouant sur certaines propriétés CSS... mais là, non D'où ma demande.

Ceddoc > Oui, j'ai essayé... sans succès, malheureusement

[NoSmoking]

Envoyé par FixSan

Pardon, j'aurais dû préciser : j'ai déjà rencontré ce bug (forcément...), et je sais qu'une solution consiste à utiliser une image de background. Néanmoins, c'est plus un contournement qu'une solution. Je souhaiterais donc, si c'est possible, l'éviter.

c'est effectivement un contournement mais devant un BUG que faire d'autre que de contourner?
La seule solution serait donc de corriger le BUG à la source ce qui visiblement est donc fait sur les dernières version

Habituellement, dans ce cas, j'arrive à m'en sortir en jouant sur certaines propriétés CSS... mais là, non D'où ma demande.

dans ce cas il faut peut être regarder du coté de la structure du document...
petit exemple

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="find-by-age">
  <h2>
    Trouver d'autres documents selon l'&acirc;ge
  </h2>
  <div class="colonne">
    <ul class="two-cols">
      <li><a href="http://www.mediatheque-erre.fr/blog/tags/dès 3 ans">dès 3 ans</a></li>
      <li><a href="http://www.mediatheque-erre.fr/blog/tags/dès 5 ans">dès 5 ans</a></li>
      <li><a href="http://www.mediatheque-erre.fr/blog/tags/dès 7 ans">dès 7 ans</a></li>
      <li><a href="http://www.mediatheque-erre.fr/blog/tags/dès 9 ans">dès 9 ans</a></li>
      <li><a href="http://www.mediatheque-erre.fr/blog/tags/dès 12 ans">dès 12 ans</a></li>
    </ul>
  </div>
  <div class="colonne">
    <ul class="two-cols">
      <li><a href="http://www.mediatheque-erre.fr/blog/tags/dès 4 ans">dès 4 ans</a></li>
      <li><a href="http://www.mediatheque-erre.fr/blog/tags/dès 6 ans">dès 6 ans</a></li>
      <li><a href="http://www.mediatheque-erre.fr/blog/tags/dès 8 ans">dès 8 ans</a></li>
      <li><a href="http://www.mediatheque-erre.fr/blog/tags/dès 10 ans">dès 10 ans</a></li>
      <li><a href="http://www.mediatheque-erre.fr/blog/tags/ados">ados</a></li>
    </ul>
  </div>
</div>

avec comme CSS

Code css :

1
2
3
4
.colonne {
  float : left;
  width : 200px;
}

[FixSan]

C'est juste, je restais bloqué sur cette idée de trouver un contournement en CSS...

Merci beaucoup !