IE에서 가끔 만나는 이상한 현상

ul li 를 쓸 경우 border나 background가 사라져 버린다.

공통인 CSS

#test h3 {
    margin:0;
}
#test ul {
     list-style:none;
     margin:;
     padding:0;
}
#test li {
     background:url(../images/test.gif) no-repeat left;
     padding-left:10px;
     border-bottom:1px solid #E5E5E5;
     line-height:220%;
}

원래썼던 코드

<div id="test">
     <h3>Title</h3>
     <ul>
        <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
     </ul>
     <h3>Title</h3>
     <ul>
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
     </ul>
</div>

문제 발생으로 인해 야메로 고쳐쓴 코드

<div id="test">
     <ul>
        <h3>Title</h3>
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
     </ul>
     <ul>
         <h3>Title</h3>
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
     </ul>
</div>

h3를 ul의 하위로 넣었더니 IE에서 나타나던 이상현상이 사라졌다.
원인을 아시는 분은 댓글로 가르침을 주시길 바라오…

일몰님의 도움

<div>
    <ul>
	<li>
            <h3>Title</h3>
            <ul>
	        <li>item</li>
	        <li></li>
            </ul>
        </li>
    </ul>
</div>

이렇게 써야 한다고 하넹..^^