divs liste imbriquées css se chevauchent

Question

j'ai une liste qui ont divs l'intérieur ..
Maintenant, quand j'utilise la liste imbriquée je vois qu'ils se chevauchent avec les divs dans la li mère ainsi qu'avec la li Beneath

la structure étant ... le html est cassé (désolé, mais le html Markdown a des défauts graves ...)

<ol id="update" class="timeline"> 


<li class="bar245"> 
     <div align="left"> 
     <span >aaaa</span> 
     <span class="delete_button"><a href="#" id="245" class="delete_update">X</a></span> 
     <div class="clear"></div> 
     </div> 

     <ol class="comment"> 
      <li> 
        <div class="clear"></div> 
        <div>Testing </div> 
      </li> 
      <li> 
        <div class="clear"></div> 
        <div>Another Test </div> 

      </li> 
     </ol> 
    </li> 
</ol> 

l'être ... css

ol.timeline 
    {list-style:none;font-size:1.2em;} 

     ol.timeline ol { 
      list-style:none; 
      margin: 0; 
      padding: 0; 
      position: absolute; 
     } 
     ol.timeline li { 
     display:none; position:relative; 
     padding:10px 0px 20px 10px; 
     line-height:1.1em; background-color:#D3E7F5; height:55px; width:489px; 

     border-bottom-style: solid; 
     border-bottom-width: 10px; 
     border-bottom-color: #ffffff; 
    } 

.clear { 
       clear:both; 
       height:1px; 
       overflow:hidden; 
       } 

J'ai essayé de d'utiliser un div clair, mais en vain ...

Voici un exemple de cette ....

http://pradyut.dyndns.org/WebApplicationSecurity/newcomment.jsp

Toute aide

grâce
Pradyut

Answer 1

Le li s et s imbriqué li doit être utilisé comme récipient et devrait avoir un div contenu dans les ...

avec une structure comme

 <ol> 
     <li class="bar248"> 
     <div class="nli"> 
     <div class="pic"> 
      <img src="dir/anonymous-thumb.png"alt="image" /> 
     </div> 
     <div align="left" class="text"> 
     <span> 
       <span class="delete_button"><a href="#" id="test" class="delete_update">R</a></span> 

       test shouted <span class="timestamp"> 2010/02/24 18:34:26 </span> <br /> 
     this 
     </span> 
     </div> 

     <div class="clear"></div> 
     </div> 
     <div class="padd"> 

     </div> 
     <ol class="comment"> 
      <li>      
        <div>Testing </div> 
      </li> 
      <li> 
        <div>Another Test </div> 
      </li> 

     </ol> 

    </li> 

    </ol> 

jeter un oeil à this

Cordialement
Pradyut

Answer 2

Je pense que le problème est que les divs ne se chevauchent pas, vous voyez juste cet effet. La raison en est que vous avez la couleur de fond définie sur les éléments <li>, qui se contiennent les uns les autres. Si vous supprimez cela et ajoutez votre arrière-plan pour dire que les divs enfants, comme ceci:

li div { background-color: #D3E7F5; } 

Il devrait être beaucoup plus facile de voir ce qui se passe avec votre mise en page, essayer, je suis sûr que ce que vous êtes après.