nested list divs overlapping css

Question

Hi
I have a list which have divs inside it..
Now when i use nested list i see that they are overlapping with the divs in the parent li as well as with the li's beneath

The structure being...the html is broken(sorry but the Markdown html has serious flaws...)

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

The css being...

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

I have tried to to use a clear div but to no avail...

Here is a example of that....

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

Any help

thanks
Pradyut

Answer 1

I think the problem is the divs are not overlapping, you're just seeing that effect. The reason it looks that way is you have the background-color set on the <li> elements, which contain one another. If you remove that and add your background to say the child divs, like this:

li div { background-color: #D3E7F5; }

It should be much easier to see what's going on with your layout, try it I'm pretty sure that's what you're after.