Mozilla 한국 커뮤니티

<img src="http://tommystyle.net/exam.png" alt="" />

<pre>
------------------------------------html---------------------------------
<!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">
<head>
<title>Reviews and free downloads at Download.com</title>
<style type="text/css" media="all">
@import url(test.css);
</style>
</head>
<body>

<div id="header">
<div id="logo">로고
</div>
<div id="user-nav">fd | fd | fd | fd | fd | fd
</div>
<div id="site-nav">
<div id="top-search"><input type="text">
</div>
<div id="main-menu">dsfdas | dsfdas | dsfdas | dsfdas | dsfdas | dsfdas |
</div>
</div>
</div>

</body>
</html>

------------------------------------css---------------------------------

#header {width: 880px; background-color: #FF3300; margin: 0 auto;}
#logo {float: left; width: 210px; background-color: #66CC33;}
#user-nav {float: right; width: 260px; padding: 50px 0px 0px 0px; background-color: #9933FF;}
#site-nav {clear: both; background-color: #CCFF33;}
#top-search {float: left; width: 200px; background-color: #006666;}
#main-menu {clear: both; padding-top: 30px; background-color: #0033FF;}

</pre>

왜 이런 문제가 생기는지 알고싶습니다.

답변 부탁드릴께요.

좋은 하루되세요.

제가 알기로
IE에서의 Padding은

|-|--------Content-----------|-|
|<--------- 300 px ---------->|

즉, 패딩과 Content Box전체 300이지만..
(안으로)

FF에서는

|-|----------Content-------------|-|
　|<--------- 300 px ---------->|

즉, 실제 Content 영역만 해당되는거지요..
(밖으로)

그래서, 그런게 아닐까...하는 생각을 해보네요^^;
(표준화쪽에서는 영 자신이 없어서..

)

중앙정렬이 안 되는 문제인가요?
body 에도 margin : 0 auto; 를 한 번 추가해보시고,
html 과 body 속성에 width : 100%; 를 줘보시기 바랍니다...

IE버그입니다.

#main-menu의 hasLayout 을 true로 해 주면 해결이 됩니다.

hasLayout 을 true로 하려면 width나 height를 지정해 주면 됩니다.

Mozilla 한국 커뮤니티

IE 와 FF 에서 출력이 달라요....

IE 와 FF 에서 출력이 달라요....