IE에서 display:none인 element를 toggle할때(block/none) IE에서 전 과 후의 여백이 틀려지는 상황이 발생하는 경우가 있는데
사용자 삽입 이미지

이럴때 해결책은 min-height를 넣어주면 된다.

IE6은 min-height를 지원않으므로 어쩔 수 없이 Hack을 써야한다.

height:37px; /* IE6 */
height /**/:auto; /* FF, IE7 */
min-height:37px; /* FF, IE7 */

height만 적어주어도 되지 않느냐~? 란 의문이 들 수 도 있겠지만 그렇게 되면 display:none인 element가 block(show)상태가 되었을때 position:absoulte된 것 처럼 위에 덮어쓰게 된다.
사용자 삽입 이미지

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim hiphapis

TRACKBACK http://hiphapis.net/trackback/101 관련글 쓰기

댓글을 달아 주세요

IE7에서 dt, dd중 dt를 display:none을 했는데도 dd의 좌측 여백이 여전이 존재한다.(물런 margin,padding 모두 0)
<dt style="display:none;margin:0;padding:0">Title</dt>
<dd style="margin:0;padding:0">Description</dd>

해결책은 의외로 쉽다.
dl로 감싸주면 된다.

<dl style="margin:0;padding:0">
    <dt style="display:none;margin:0;padding:0">Title</dt>
    <dd style="margin:0;padding:0">Description</dd>
</dl>

FF때문에 dl 에 margin,padding을 0을 줘야 한다.
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim hiphapis

TRACKBACK http://hiphapis.net/trackback/84 관련글 쓰기

댓글을 달아 주세요

  1. dt, dd 태그 밖에 dl을 감싸주지 않으면 일단 invalid markup 아닌가요? 그리고 dl에 기본 마진이 있는것은 어쩌면 ul, ol 에 기본마진이 존재하는것과 같은 필요가 아닌가 생각 됩니다. ^^

    2007/12/28 04:58 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 맞아요~ㅎㅎ ol, ul에 대해선 다들 잘 아는데, dl에 대해선 비교적 덜 아시는거 같아서요.

      2007/12/28 10:49 [ ADDR : EDIT/ DEL ]