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> </ul> </li> </ul> </div>
이렇게 써야 한다고 하넹..^^
June 21st, 2005 at 11:43 pm
흑.. blogline 에 안올라오니 이런글이 올라왔는지도 몰랐네요. 음,,
원래 heading 은 첫번째 ul 위로 위치하면 안됩니다.
표준에도 안맞구요.
가 가능합니다. <li> 안에 종속된것이 가능하죠.
헌데 ie 에서 에러나느줄은 몰랐네요 ㅎㅎ
June 21st, 2005 at 11:49 pm
code안이 가려졌네요.. 뭐라고 쓰셨을까 @_@
June 22nd, 2005 at 4:06 pm
지금 표현하려는 부분은
[ul id="post"]
[li]
[h3] 데일리 포커스 [/h3]
[ul id="post-list"]
[li] 이곳은 아마 함수 처리1? [/li]
[/ul]
[/li]
[li]
[h3] 오늘의 시사포인트 전략 [/h3]
[ul id="post-list"]
[li] 이곳은 아마 함수 처리2? [/li]
[/ul]
[/li]
…
[/ul]
이렇게 html 마크업을 작성한 후에, css를 추가해야 할 것 같네요. css추가 부분은 너무 길어서 다음에~ ㅎㅎ
June 22nd, 2005 at 4:17 pm
큰 그룹의 ul이 2개 들어갈 필요가 없는 거였네용
h3도 li의 하나로 처리하고
그 하위의 ul로 리스트를 처리하는 거군용 ^^
두분다 감사드려요 ~~~~!!!
June 23rd, 2005 at 12:47 pm
밥사주세요.. ㅡㅜ
June 23rd, 2005 at 5:03 pm
아아;; 광화문으로 달려오세요!
June 23rd, 2005 at 7:06 pm
젤 골치 아팠던 게 저는 ul 이 브라우저에 따라 좌측 indent 가 다르더군요.. hack 으로 맞추긴 했는데, 영 찜찜합니다. 가장 기본적이고 꽤 많이 쓰일 태그인데도, 브라우저에 따라 천차만별이에요. 익스는 버전에 따라 다르게 렌더링하기도… orz;;
June 23rd, 2005 at 10:06 pm
네, indent가 다르더라구요~
dtd선언을 안할경우 IE에서는 list-style:none;margin:0;이런게 안먹힐 때도 있더라구요
저번에 급해죽겠는데; css가 안먹혀서 그냥 table로 다시 짜서 준 적도 있어요 ㅠ0ㅠ)