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%;

}

원래썼던 코드

<h3>Title</h3>

<ul>

</ul>

<h3>Title</h3>

<ul>

</ul>

</div>

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

<ul>

<h3>Title</h3>

</ul>

<ul>

<h3>Title</h3>

</ul>

</div>

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

일몰님의 도움

<div>

<ul>

<li>

<h3>Title</h3>

<ul>

</ul>

</li>

</ul>

</div>

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

일모리

흑.. blogline 에 안올라오니 이런글이 올라왔는지도 몰랐네요. 음,,
원래 heading 은 첫번째 ul 위로 위치하면 안됩니다.
표준에도 안맞구요.

가 가능합니다. <li> 안에 종속된것이 가능하죠.
헌데 ie 에서 에러나느줄은 몰랐네요 ㅎㅎ
kukie

code안이 가려졌네요.. 뭐라고 쓰셨을까 @_@
Hooney

지금 표현하려는 부분은
[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추가 부분은 너무 길어서 다음에~ ㅎㅎ
kukie

큰 그룹의 ul이 2개 들어갈 필요가 없는 거였네용
h3도 li의 하나로 처리하고
그 하위의 ul로 리스트를 처리하는 거군용 ^^

두분다 감사드려요 ~~~~!!!
일모리

밥사주세요.. ㅡㅜ
kukie

아아;; 광화문으로 달려오세요!
yser

젤 골치 아팠던 게 저는 ul 이 브라우저에 따라 좌측 indent 가 다르더군요.. hack 으로 맞추긴 했는데, 영 찜찜합니다. 가장 기본적이고 꽤 많이 쓰일 태그인데도, 브라우저에 따라 천차만별이에요. 익스는 버전에 따라 다르게 렌더링하기도… orz;;
kukie

네, indent가 다르더라구요~
dtd선언을 안할경우 IE에서는 list-style:none;margin:0;이런게 안먹힐 때도 있더라구요
저번에 급해죽겠는데; css가 안먹혀서 그냥 table로 다시 짜서 준 적도 있어요 ㅠ0ㅠ)
Pingback: Plugin: Code Highlighter (Syntax Expression) - kukie()