вложенные списки div с перекрытием css

Question

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

Структура ... html не работает (извините, но html Markdown имеет серьезные недостатки ...)

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

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

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

Вот пример этого ....

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

Любая помощь

спасибо
Pradyut

Answer 1

Файлы li и вложенные библиотеки li должны использоваться в качестве контейнера и должны содержать внутри себя 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>

взгляните на это

С уважением
Pradyut

Answer 2

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

li div { background-color: #D3E7F5; }

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