Feed on
Posts
Comments

이 문제로 대략 작업중 3시간을 졸리움과 지겨움을 이겨내며 소스를 이리저리 고쳐봤지만 해결되지않아
정찬명 님에게 조언을 구해 문제에 대한 원인이라도 구할수 있어서..
그리고 대략 처음으로 작업중에 문제를 발견해서 이렇게 글을 올릴수 있어서 우선 굉장히 기쁨을 말로는 다 표현할수가 없습니다^^;

작업중이였던 소스는 올리기가 민망해 정찬명 님이 적절한 예제로 표현해준 소스를 올립니다 ㅎ;;

<!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=euc-kr" />
<title>Untitled Document</title>
<style type="text/css">
* { font: small "돋움", Dotum, AppleGothic, Sans-serif; margin: 0px; padding: 0px;}
ol { display:block; overflow:auto; padding-left:30px}
ol li { float:left; clear:both; display:list-item;}
</style>
</head>
<body>
<ol>
<li>하나</li>
<li>둘</li>
<li>셋</li>
<li>넷</li>
<li>다섯</li>
<li>여섯</li>
<li>일곱</li>
<li>여덟</li>
<li>아홉</li>
<li>열 </li>
</ol>
</body>
</html>

지금까지 list 태그를 쓰면서 블릿은 거의 이미지를 background 를 이용해서 표현했지만
number 를 표현하기위해 ol 태그에 list-style:decimal 코딩하던차에 발견했습니다.

1. 일
2. 이
3. 삼
4. 사
5. 오
6. 육
7. 칠
8. 팔
9. 구
10. 십

물론 처음엔 이런 결과가 나오리라 생각했지만
FF에서 확인후 IE에서 봤지만 결과는….-_-;;

<li> 를 float 시키면 list-style 속성이 제거됩니다. 이것은 IE, NN, OP 공통적인 렌더링 결과로 표준 렌더링 방식임에 틀림없습니다. 그러나, <li> 에 대하여 display:list-item 속성을 추가해 주면 float 된 <li> 라 할지라도 list-style 이 적용됩니다. 그러나, 여기서 또 한번의 반전이 있습니다. IE 는 <li> 가 float 되면 display:list-item 속성을 주더라도 list-style 이 렌더링 되지 않는다는 겁니다.

FF와 IE에서 비교해보시길..

Comments are closed.