вложенный список дивы перекрывающихся CSS

Question

У меня есть список, который есть дива внутри ..
Теперь, когда я использовать вложенный список я вижу, что они накладываются друг на друг с дивами в родительском Ли, а также с Ли под

структуры является ... HTML, сломана (извините, но Markdown HTML имеет серьезные недостатки ...)

<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> 

устанавливаемого сотовое существо ...

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; 
       } 

Я пытался использовать ясный DIV, но без толку ...

Вот пример того, что ....

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

Любая помощь

благодаря
Pradyut

Answer 1

Ли s и вложенный литий s должен быть использован в качестве контейнера и должен иметь DIV, содержащийся в них ...

со структурой, как

 <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> 

взглянуть на this

С уважением
Pradyut

Answer 2

Я думаю, что проблема заключается в том, что divs не перекрываются, вы просто видите этот эффект. Причина заключается в том, что у вас есть фоновый цвет, установленный на элементах <li>, которые содержат друг друга. Если удалить, что и добавить фон сказать дочерние дивы, как это:

li div { background-color: #D3E7F5; } 

Это должно быть гораздо легче увидеть, что происходит с вашей планировкой, попробуйте, я уверен, что это то, что вы после.