CSS: UL/OL/Div flottant à gauche dans IE

Question

Le scénario est que le client veut un div flottant (la zone grise) avec le texte qui l'entoure. Cependant, une partie de ce texte inclut ul's et ol's, qui se cachent derrière la div flottante dans IE6.

J'ai essayé d'emballer les ul/ol dans un div pour voir si cela aiderait, mais ont échoué. Quelqu'un at-il déjà rencontré ce problème et trouvé une solution appropriée?

(Note: Ceci est un ancien site avec une capacité limitée à pouvoir modifier grand-chose à l'intérieur de la mise en page)

Answer 1

Je pense que vous pouvez modifier le Li pour afficher leurs balles à l'intérieur plutôt qu'à l'extérieur et qui devrait vous aider à ...

ul { 
    list-style-position: inside; 
} 

Answer 2

Cependant une partie de ce texte comprend de ul pour et ol, qui se cachent derrière la div flottante dans IE6.

Si nous parlons quelque chose d'aussi simple que cela:

<div style="border: dotted red 1px; float: left; width: 100px; height: 100px">foo</div> 
<p>bar</p> 
<ol style="border: dotted blue 1px;"> 
    <li>potato</li> 
    <li>yoghurt</li> 
</ol> 

Alors ce qui se passe ici se passe sur tous les navigateurs, et pas seulement IE. Vous pouvez le voir depuis les bordures de cet exemple: le remplissage à gauche de la liste se fait derrière le flottant, sans pousser le contenu de la liste vers la droite. C'est parce que les flottants ne repoussent que les éléments dans une boîte de ligne, pas les éléments de blocage.

Si vous voulez une solution de contournement rapide, enveloppez le < ul> dans un div < avec le style 'display: inline-block'.

Answer 3

flottant + IE6 est toujours une cause de la douleur et de la souffrance non intentionnelle. Quelques simples corrections:

1. Ajouter plus de marge à la boîte flottante
2. Ajouter une marge de gauche à votre ul/ol