div -li 자동 들여쓰기...?..문제;

visharp · Post by **visharp** » 2005 09 14 12:01 55

css로 작업을 좀 해보려 했는데..
아는 게 많지 않아서 영 깝깝합니다. 특히나 IE때문에 아주 머리썩습니다-_-;;..

질문을 좀 드리려고 하는데요. 소스는 아래를 참조하세요.
밑에 소스를 IE랑 파폭에서 돌려보시면
파폭은 빨간 영역안의 li가 가지런하게 (세로로)일자로 잘 나옵니다.
근데 IE에서 보시면 5번째 줄까지 알 수없는 약간의 들여쓰기를 하더니만
6번째줄부터 갑자기 들여쓰기를 안하고 맙니다!!
세로가 삐뚤해져요.

그리고 맨처음div(이미지를 포함한 div)의 height값을 변경해주니,
div의 height만큼 또 들여쓰기가 됩니다.
근데 말로 하자니 좀 어려워 지네요. 소스 돌려보시고 height수정하시면
쉽게 아실겁니다

double float-margin은 혼자서 어쩌다 해결했는데..
이건 찾아봐도 없는 듯 하고... 영 모르겠어요.
게다가 죄다 영어라;;;^^;;

암튼 아시는 분은 힌트 주세요~~

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>테스트</title>
		<style type="text/css">
			li{ border:1px solid gray;}
		</style>
	</head>
	<body>
		<div style="float:left; margin-left:20px; display:inline;  background-color:#dfdfaa; width:175px; height:79px"><img src="http://www.mozilla.org/images/front-ff15beta1.png" style="border:1px solid gray; width:175px; height:79px"/></div>
		<!--
		<div style="float:left; margin-left:20px; display:inline;  background-color:#dfdfaa; width:175px; height:179px"><img src="http://www.mozilla.org/images/front-ff15beta1.png" style="border:1px solid gray; width:175px; height:79px"/></div>
		-->
		<div style="margin-left:170px;background-color:blue;">
			<ul style="list-style:none; background-color:red;">
				<li>모질라 썬더버드</li>
				<li>모질라 - 웹표준화 - 웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
				 .........
				</li>
				<li>모질라 파이어 폭스</li>
				<li>모질라 브라우져</li>
			</ul>
		</div>
		<div style="clear:both"> </div>

		<ul>
			<li>왼쪽으로딱</li>
			<li>모질라 썬더버드</li>
			<li>모질라 - 웹표준화 - 웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
			</li>
		</ul>

	</body>
</html>

oragi · Post by **oragi** » 2005 09 14 12:58 47

flote로 준 속성옆에 마진으로 준 내용에 들여쓰기가 되는건 어쩔수 없는듯합니다. 대신 position을 주어서 해결이 가능하네요.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>테스트</title>
<style type="text/css">
li{ border:1px solid gray; text-align:justify; }
</style>
</head>
<body>
<div style="position:absolute; top:0.8em; left:20px; display:inline; background-color:#dfdfaa; width:177px; height:81px"><img src="http://www.mozilla.org/images/front-ff15beta1.png" style="border:1px solid gray; width:175px; height:79px"/></div>

<ul style="list-style:none; margin:0 0 0 170px; padding:0 0 0 40px; background-color:red;">
<li>모질라 썬더버드</li>
<li>모질라 - 웹표준화 - 웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
.........</li>
<li>모질라 파이어 폭스</li>
<li>모질라 브라우져</li>
</ul>
<div style="clear:both"> </div>
<ul>
<li>왼쪽으로딱</li>
<li>모질라 썬더버드</li>
<li>모질라 - 웹표준화 - 웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화웹표준화
</li>
</ul>

</body>
</html>

이렇게 보시면 원본소스를 파폭에서 보신것과 비슷하게 보이네요.
상단 이미지 div는 position을 사용했는데 익스와 파폭이 약간다르게 나오니
body에 margin,padding을 0으로 주신뒤 쓰시거나 css핵을 사용하세요.[/code]

oragi · Post by **oragi** » 2005 09 14 13:03 20

안쪽의 div에 마진을 300px이나 줬는데도 약간 들여쓰기가 되는군요.
ie의 렌더링버그 같습니다.

oragi · Post by **oragi** » 2005 09 14 13:15 10

이것에 관한 내용인듯합니다.

http://ilmol.com/wp/2005/06/22/65/

<출처 : 일모리님 블로그>

Mozilla 한국 커뮤니티

div -li 자동 들여쓰기...?..문제;

div -li 자동 들여쓰기...?..문제;

음..

잘 보니 ie의 버그 같습니다.

찾아보니

Who is online