차림

2008년 3월 27일

li에서 border 위치에 따른 웃기는 IE 오류

li로 글 목록을 만들 때 boarder를 어디에 두느냐에 따라 IE 6.0에서는 오류가 나타나기도 한다. 물론 불여우에서는 멀쩡하다.

예를 들어 하이퍼링크로 연결된 글 목록을 아래처럼 만들려고 할 경우를 생각해 보자.

이 글 목록의 소스는 다음과 같다.


<ul class="ex_list_bottom">
<li><a href="index.html">시금치</a></li>
<li><a href="index.html">콩나물</a></li>
<li><a href="index.html">아욱</a></li>
<li><a href="index.html">봄동</a></li>
<li><a href="index.html">냉이</a></li>
</ul>

css는 다음과 같이 만들면 된다.


ul.list_bottom { margin: 0; 
          padding: 0; 
          text-align: left; 
          list-style: none; 
          font-family: 굴림, Gulim; 
          font-size: 80%; 
          border-top: 1px solid #F3EFFA; }   ← 바로 여기
ul.list_bottom a  { text-decoration: none; 
            display: block; 
            padding: 0.2em 1em; }
ul.list_bottom li { border-bottom: 1px solid #F3EFFA; } ← 바로 여기
ul.list_bottom a:hover { background: #F3EFFA; }

이 소스에서 볼 수 있듯이, ul에서 border를 위에 주었고 li에서 border를 아래에 주어 글 목록 모든 줄의 위 아래에 선이 그어지게 하였다.

이와 같은 글 목록 모양은 반대로 ul에서 border를 아래에 주고 li에서 border를 위에 주어 만들 수도 있을 것이다. 하지만 IE 6.0에서는 그렇지가 않더란 얘기다.


border 위치 바꿈

ul.list_top { margin: 0; 
          padding: 0; 
          text-align: left; 
          list-style: none; 
          font-family: 굴림, Gulim; 
          font-size: 80%; 
          border-bottom: 1px solid #F3EFFA; } ← 바로 여기
ul.list_top a  { text-decoration: none; 
            display: block; 
            padding: 0.2em 1em; }
ul.list_top li { border-top: 1px solid #F3EFFA; } ← 바로 여기
ul.list_top a:hover { background: #F3EFFA; }

단지 border 위치만 바꿨을 뿐이지만 위와 같은 css로 글 목록을 꾸미면 아래와 같이 한 줄의 높이가 두 배쯤 커진다. 물론 불여우 2.0에서는 제대로 나오고 IE 6.0에서만 이런 웃긴 모양으로 나올 뿐이다. 따라서 지금 불여우로 이 웹 문서를 보고 있다면 위에 있는 글 목록과 아래에 있는 글 목록 모두 똑같이 보일 것이고 IE 6.0으로 보고 있다면 두 글 목록이 다르게 보일 것이다.

이런 오류는 정말이지 직접 겪어보지 않으면 알 수도 없고 오류가 있는 걸 알아도 그 원인이 뭔지 알아내기가 정말 힘들다. 이거 알아내는 데 쏟은 시간이 대체 얼마인가? 쳇.

목록