Float Clearing Problème dans IE6 - Ils Clearing par eux-mêmes!

Question

Je construis une page qui a une liste UL avec ses articles flottants pour créer 2 colonnes. Voir http://epraxadev.com/valencia/food_truck_festival/index2.php

Cela fonctionne parfaitement dans Firefox, Chrome, Safari, IE8 et IE7. Le seul problème est dans IE6. Dans IE6, à la place des éléments de la liste s'empilant dans des colonnes nettes à deux rangées, avec la vignette flottant vers la gauche et la description de la vignette flottant vers la droite, la description efface d'une manière magique la vignette flottante. Impair!

Voici le balisage

<ul id="theTrucks"> 
<li> 
    <a class="thumb"><img src="images/trucks/dim-sum.png" width="78" height="79" alt="Dim Sum" /></a> 
    <div class="details"> 
     <p>The Dim Sum Truck brings ample amounts of steamed shu mai and har gow dumplings, baked BBQ pork buns and more.</p> 
     <ul> 
      <li><a href="#" target="_blank">Website &raquo;</a></li> 
      <li><a href="#" target="_blank">Facebook &raquo;</a></li> 
      <li><a href="#" target="_blank">Twitter &raquo;</a></li> 
     </ul> 
    </div> 
</li> 

<li> 
    <a class="thumb"><img src="images/trucks/border-grill.png" width="78" height="79" alt="Border Grill" /></a> 
    <div> 
     <p>The Border Grill Truck serves gourmet tacos, quesadillas, ceviches and more.</p> 
     <ul> 
      <li><a href="#" target="_blank">Website &raquo;</a></li> 
      <li><a href="#" target="_blank">Facebook &raquo;</a></li> 
      <li><a href="#" target="_blank">Twitter &raquo;</a></li> 
     </ul> 
    </div> 
</li> 

<li class="clear"></li> 

...repeats 

Et voici le CSS:

<style type="text/css"> 
ul#theTrucks { margin:1em 0 0; padding:0; } 
ul#theTrucks li { width:320px; float:left; display:inline; margin-right:11px; list-style:none; overflow:hidden; } 
ul#theTrucks li a.thumb { float:left; display:inline; width:78px !important; height:79px; margin:0; } 
ul#theTrucks li div { width:230px; float:left; display:inline; padding:0; margin:0 0 0 11px; } 
ul#theTrucks li div p { margin-bottom:0.5em; font-size:11px; line-height:1.2; } 
ul#theTrucks li div ul { padding:0; margin:0; list-style:none; font-size:11px; line-height:1.2; } 
ul#theTrucks li ul li { list-style-type:none; margin:0; } 

ul#theTrucks li.clear { width:100%; float:none; display:block; margin:0; height:50px; clear:both; } 
</style> 

<!--[if lte IE 6]> 
<style type="text/css"> 
ul#theTrucks li div { width:100px; clear:none; } 
</style> 
<![endif]--> 

Notez le style spécifique à IE6 qui rend le div que 100px, donc je sais que ce n'est pas parce que le contenant li (à 320px) est trop petit pour le contenir.

Answer 1

Compris le problème. Les étiquettes <li> de la liste non ordonnée la plus interne héritaient de la largeur du conteneur <li>, qui était 320px. J'ai mis le <li> s comme:

ul#theTrucks li ul li { width:230px; margin:0; } 

et ta da! Fini les problèmes d'alignement = D

Answer 2

http://www.thedimsumtruck.com/Index/Home.html est un désordre! Vous pouvez à peine faire défiler la page dans IE8.