세로로 반복되는 배경 이미지 위에 내용물을 입힐 때 의도하지 않은 빈 줄 없애는 방법

아래와 같은 경우 빈 줄이 생길 수 있습니다. ㅠ.ㅜ

IE 호환성보기에서는 빈 줄이 생기지 않지만, IE 기본모드와 비 IE 웹브라우저에서 발생.

아마도, 반복되는 배경 이미지가 입혀져야 하는 height 를 자동으로 산출할 수 없기 때문에 발생하는 듯..

세로로 반복되는 배경 이미지를 놓고..

1. 그 안에 margin 을 사용할 때, margin 대신 padding 사용으로 해결

2. 그 안에 float 를 사용할 때, clear:both 로 float 정지

<div style="background:url('...')" ...>

  <div style="margin:0 10px" ...>...</div>

  ...

</div>

아래와 같이 margin 대신에 padding 을 사용해 보세요.

<div style="background:url('...')" ...>

  <div style="padding:0 10px" ...>...</div>

  ...

</div>

<div style="background:url('...')" ...>

  <div style="float:left" ...>...</div>

  ...

</div>

아래와 같이 float:left 가 들어간 동일 레벨 마지막에 clear:both 스타일을 먹여 보세요.

<div style="background:url('...')" ...>

  <div style="float:left" ...>...</div>

  ...

  <div style="clear:both" />

</div>