Mozilla 한국 커뮤니티

익스의 경우 non.gif나 blank.gif 등..
투명 1x1 이미지를 이용하여 1의 여백을 늘리거나 점선을 구현하곤 했는데

css에 매료되어 border를 사용하여 구현하려 했지만
점선이 익스에서 무진장 구리게 나오기에,

다시금 1x1 이미지를 이용하여 점선을 구현하려 합니다.

Code: Select all

.dot_bright {
	height: 1px;
	background: url(../images/common/main_dot_line_bright.gif);
	}

위와 같이 지정해 두고

Code: Select all

<div class="dot_bright"><img src="./img/common/none.gif" width="1" height="1" border="0" /></div>

으로 불러들여 사용하는데, 모질라에선

Code: Select all

<img src="./img/common/none.gif" width="1" height="1" border="0" />

를 삭제해도 1px이미지가 구현되지만 익스에선 그게 안됩니다.
div만으로 1px 높이가 구현되지 않는다니 ㅡㅡ;;;

<img src="./img/common/none.gif" width="1" height="1" border="0" />를 사용하지 않고 점선을 구현할 수 있는 방법을 알고싶습니다.

접근 방법을 약간 변경하시는 것이 좋을 것 같습니다.

1px 짜리 점선은 디자인 적인 요소이고 컨텐츠가 아니기 때문에 html 의 div 도 필요 없고 페이지내에서 <img 로 표현 하는 것도 좋지 않습니다.

1px 짜리 점선이 들어가야 하는 박스(div 일 수도 있고 li 일 수도 있고 다른 것일 수도 있습니다.)에서 background 를 사용하시는 것이 좋습니다.

Code: Select all

<div style="background: url(../images/common/main_dot_line_bright.gif) repeat-x;">
컨텐츠
</div>

와 같이 사용하시면 디자인 적인 요소에 html 태그를 할애하지 않아도 충분히 점선을 표현 할 수 있습니다.

난감 ㅠㅠ wrote:

Code: Select all

.dot_bright {
	height: 1px;
	background: url(../images/common/main_dot_line_bright.gif);
	}

위와 같이 지정해 두고

Code: Select all

<div class="dot_bright"><img src="./img/common/none.gif" width="1" height="1" border="0" /></div>

main_dot_line_bright.gif를 div의 백그라운드로 점선을 표현하려 하시는 군요.
간단한 점선이라면 style="border-bottom: 1px dashed #000" 이런식으로 할경우
레이어 아래에 1px의 점선 테두리가 생깁니다.
독특한 모양의 점선이 아니고 평범한 점선이라면 border를 이용하시기 바랍니다.

위의 문제는 익스에서 일어나는 일상적인 문제로써 <div>의 높이를 정해놓아도
내부 내용이 커지면 늘어나 버립니다. 거기다가 글씨가 없어도 익스에서는 글씨가
있는 것 처럼 하여 글씨 높이가 잡혀서 그렇습니다.

Code: Select all

.dot_bright {
	height: 1px;
	background: url(../images/common/main_dot_line_bright.gif);
        overflow: hidden; /* 넘어가면: 숨긴다. */
	}

overflow: hidden;를 넣어주시면 됩니다.

아직 테이블 개념으로 css를 접근하시기 때문에 점선 이미지를 하나 넣는데 위와 같은 방법을 사용하시게 됩니다.
위에 현석님 답변처럼 점선 하나 넣기위해 div따로 두는 것은 좋은 방법이 아닙니다.

Mozilla 한국 커뮤니티

1px 이미지..

1px 이미지..

Re: 1px 이미지..