我想实现如下效果。
但是做好了发现有溢出如下
为了解决溢出我添加了怎么两个属性：height: 1%;overflow: hidden;效果基本上好了，可是（上）边距却不受控制了，在FF中没问题，在IE中显示如下图。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
font-size: 12px;
text-align: center;
margin: 0px;
padding: 0px;
}
#container {
padding: 0px;
margin: 0px auto 0px auto;
width: 400px;
}
#middletwo {
background-image: url(picture_h1.gif);
background-repeat: no-repeat;
padding-top: 41px;
height: 1%;
overflow: hidden;
}
#middletwo ul {
padding: 0px;
list-style-type: none;
margin: 10px 0px 3px 0px;
}
#middletwo ul li {
float: left;
width: 99px;
}
-->
</style></head>
<body>
<div id="container">
<div id="middletwo">
<ul>
<li><a><img src="beauty1.jpg" /></a></li>
<li><a><img src="beauty2.jpg" /></a></li>
<li><a><img src="beauty3.jpg" /></a></li>
<li><a><img src="beauty4.jpg" /></a></li>
</ul>
</div>
<div id="middletwo">
<ul>
<li><a><img src="beauty1.jpg" /></a></li>
<li><a><img src="beauty2.jpg" /></a></li>
<li><a><img src="beauty3.jpg" /></a></li>
<li><a><img src="beauty4.jpg" /></a></li>
</ul>
</div></div>
</body>
</html>
请高手指教，我写的代码到底是哪里的问题为什么会发生溢出呢？我加那两个属性对不对，添加他们是什么意思！还有为什么间距没显示了？我弄不明白！