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>
이렇게 써야 한다고 하넹..^^
최근 댓글