Page 1 of 1
FF와 IE에서 margin이 다르게 표시되요
Posted: 2006 08 23 12:37 44
by 튀밥
Code: Select all
<DOCTYPE>
<html>
<head>
<title>Untitled Document</title>
<meta>
<style>
html,body {margin:0 auto; padding:0; background:#aaa; height:100%;}
#wrap {width:667px; margin:0 auto; background:#ddd; height:100%;}
#main {width:644px; margin-top:40px; background:#fff;}
#head {height:200px;}
</style>
</head>
<body>
<div>
<div>
<div>
헤드
</div>
<div>
내용
</div>
</div>
<div>
푸터
</div>
</div>
</body>
</html>
이렇게 하면 main만 margin-top이 먹어야는거 아닌가요??
IE에선 문제없이 잘 나오는데 FF에선 wrap에 margin-top이 먹네요
오전내내 이걸로 머리 싸매고 있는데 뭐가 잘못된건지 알려주세요 ㅜㅜ
^^;; 코드가 일부분 지워져서 다시요
Posted: 2006 08 23 12:47 27
by 튀밥
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
html,body {margin:0 auto; padding:0; background:#aaa; height:100%;}
#wrap {width:667px; margin:0 auto; background:#ddd; height:100%;}
#main {width:644px; margin-top:40px; background:#fff;}
#head {height:200px;}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="head">
헤드
</div>
<div id="content">
내용
</div>
</div>
<div id="footer">
푸터
</div>
</div>
</body>
</html>
IE의 결과 처럼 하려면..
Posted: 2006 08 23 14:05 53
by 龍
IE7 을 쓰고 있습니다만.. 어떤 모양이 제대로 맞는 모양인지가 알 수 없어서;
헤드 윗 부분도 #ddd 컬러로 나오고 그안에 작은 흰색 박스가 들어있는 모양인가요?
그럼 margin-top 부분은 지우고, #wrap 에 padding-top:40px을 넣어주시는 게 맞을것 같습니다만.
이렇게 수정하면 IE 에선 변화가 없고 FF에선 IE와 동일한 모습으로 나옵니다.