FF와 IE에서 margin이 다르게 표시되요

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
Post Reply
튀밥

FF와 IE에서 margin이 다르게 표시되요

Post 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이 먹네요
오전내내 이걸로 머리 싸매고 있는데 뭐가 잘못된건지 알려주세요 ㅜㅜ
튀밥

^^;; 코드가 일부분 지워져서 다시요

Post 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의 결과 처럼 하려면..

Post by »

IE7 을 쓰고 있습니다만.. 어떤 모양이 제대로 맞는 모양인지가 알 수 없어서;
헤드 윗 부분도 #ddd 컬러로 나오고 그안에 작은 흰색 박스가 들어있는 모양인가요?
그럼 margin-top 부분은 지우고, #wrap 에 padding-top:40px을 넣어주시는 게 맞을것 같습니다만.
이렇게 수정하면 IE 에선 변화가 없고 FF에선 IE와 동일한 모습으로 나옵니다.
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 0 guests