줄과 열이 잘 맞질 않네요

[프레디]

안녕하세요

오게임(?)때문에 파폭을 쓰기 시작한 초보 유저입니다

http://www.film2.co.kr/

이 사이트 보면 열과 줄이 맞질 않아서 문자들이 겹치기까지 합니다

수정이 가능할까요

[흑마법사]

이렇게 되는 구체적인 표준상의 이유는 잘 모르겟습니다만 (혹시 아시는 분 계시면 답변 바랍니다)

기사 개요가 출려되는 부분의 코드가 현재는 이렇게 되어 있습니다.

Code: Select all

<tr><td width="350">
<a href="[기사 주소]"><img src="[이미지 주소]" style="margin: 0pt 10px 10px 0pt;" align="left" border="0" height="72" width="94"></a>
<span style="font-size: 9pt; line-height: 22px;">
<a href="[기사 주소]"><b>[기사 제목]</b></a><br>
<div
 style="text-align: justify; width: 240px; height: 70px;">
[내용]
</div>
<font color="#808080"><em>[기사/분류]</em></font>
</span>
</td></tr>

여기서 내용이 출력되는 곳의 DIV태그 말인데... Width 240px이 이미지를 포함한 너비로 현재 계산이 되고 있습니다. 만든 사람은 텍스트에만 적용이 되라고 저렇게 만든거 같습니다만 아마도 IMG 에서 align=left를 쓸 경우, 이미지의 존재를 무시하게 되는거 같습니다.

반면, 익스에서는 그렇지 않군요. 그렇다고 파폭에 맞춰서 width 346으로 잡으면 익스에서 봤을때 기사가 잘리는군요.

어차피 이미지랑 글이랑 이렇게 구분해 놓을거면 차라리 테이블 상에서 별도의 TD를 주는 편이 나을거 같은데요?

[hyeonseok]

div에 float: left를 주면 어떨까요?

[소프트원트]

기존 소스에 메이지 않고 다시 코딩하는 게 바람직하지 않을까요 ?

dl, dt 태그를 이용하고, img 태그를 블록요소로 지정하고, 하단에 겹치는 요소를 clear 속성을 부여하면 문제를 쉽게 처리할 수 있겠죠.

Code: Select all

<style>
div {
width:340px;
}

dt {
color:red;
font-weight:bold;
}

dd {
margin:0px;
padding:0px;
}
.t-img {
display:block;
float:left;
margin:10px;
}

.writer {
clear:both;
}
</style>
<div>
<img class="t-img" src="http://www.film2.co.kr/images/news/news_S/2007/news_10651_S.gif" width="94" height="72">
<dl>
<dt>베를린영화제 경쟁부문 추가 발표</dt>
<dd>
<도끼에 손대지 마><위조자> 등 57회 베를린국제영화제 경쟁부문 진출작 6편, 비경쟁부문 초청작 2편이 추가로 발표됐다.
</dd>
</dl>
<p class="writer">송순진  News</p>
</div>

[소프트원트]

Code: Select all

<tr><td>
<a href="[기사 주소]"><img src="[이미지 주소]" align="left" border="0" height="72" width="94"></a>
<span>
<a href="[기사 주소]"><b>[기사 제목]</b></a><br>
<div>
[내용]
</div>
<font><em>[기사/분류]</em></font>
</span>

div에 height:70px값이 주어져있기 때문입니다. IE는 height값을 최소값으로 인식합니다. 그런데, 표준 웹브라우저에서는 이를 고정된 실제값으로 인식합니다. div에 border 속성을 주면 알 수 있을 것입니다.

따라서, 70px보다 텍스트 범위가 크기 때문에 겹치게 되는 것입니다.

또하나 블록요소에 인라인요소를 포함시킬 수 있으나 인라인요소에 블록요소를 포함시키는 것은 잘못입니다.

아파트 한채가 아파트 단지를 포함할 수 없는 것처럼요.