如何解决幻灯片的CSS问题？

Question

My Css

#container{
    display:block;
}

#container ul{
    list-style:none;
    position:relative;
    margin:0px;
    padding:0px;
    display:block;
}

#container li{
    list-style:none;
    margin:0px;
    padding:0px;
    position:absolute;
    top:0;
    left:0;
}

#container img{
    margin:0px;
    padding:0px;
}

my HTML

<div id="container">
<ul>
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
</ul>
</div>

all the pictures rendered under each other which is what I want but the problem is that if I add any div after #container it will inserted behind it, I want to insert some divs after it but every time I add another div it goes behind it, how can i solve that?

Thanks

Answer 1

You can fix this by setting the height and width on #container ul . That is what I've done when making a photo rotator, since the image sizes are usually known ahead of time.

Answer 2

you need to clearfix the div you insert after container :

<div id="container">
</div>

<div id="mydiv" class="clearfix">
</div>

and CSS:

.clearfix {
   clear:both;
   display:block;
}

Answer 3

Change the style for #container_li to (ie remove the absolute positioning).

#container li
{
    display: block;
    list-style: none;
    margin: -4px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

Maybe you should also alter #container ul to (remove relative positioning)

#container ul{
    list-style:none;
    margin:0px;
    padding:0px;
    display:block;
}

Offset of -4px works for IE, -5px for Firefox.