묻고답하기
div 적용중 파폭에서 안뜨는것 질문
2009.12.18 10:36
div 로 홈페이지 만들기 공부중입니다
http://cru.zc.bz/xe/?mid=humor
여기보시면 ie에서는 정상적으로 뜨는걸 볼수있습니다
하지만 파폭에서는 이상하게뜨는데요....
ie와같이 정상적으로 뜨게하려면 어떻게해야할까요 ㅠ
그리고 div 완전 첨 공부하는 생초보라 태그가 좀 조잡한면이 있을거같은데 ㅠ 깔끔하게 필요없는거 빼고 수정도해주심 더 감사하구요
<!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>div 태그로 레이아웃 설정</title>
<script language="JavaScript">
function height(){
var kkk = document.getElementById("content").offsetHeight;
document.getElementById("left").style.height = kkk;
document.getElementById("left1").style.height = kkk;
document.getElementById("right").style.height = kkk;
}
</script>
<style type="text/css">
body { text-align:center; width:100%; height:100%;}
#header {
width:840px;
height:148px; overflow:hidden;
}
#menu {
width:840px;
height:28px; overflow:hidden;
}
#left {
width:36px; background-color:white; overflow:hidden; float:left;
}
#left1 {
width:180px; background-color:white; overflow:hidden; float:left;
}
.login {
width:156px; height:100%; overflow:hidden; position:relative; float:left;
}
#content {
width:590px; background-color:#fff; overflow:hidden; float:left;
}
#right {
width:34px; overflow:hidden;
float:left;
}
#footer {
width:840px; height:40px; background-color:#452123; overflow:hidden;
clear:both;
}
#logo {
width:158px; height:148px; overflow:hidden;
float:left;
}
#main {
width:117px; height:126px; overflow:hidden;
float:left;
}
#lapis {
width:97px; height:126px; overflow:hidden;
float:left;
}
#cru {
width:89px; height:126px; overflow:hidden;
float:left;
}
#board {
width:90px; height:126px; overflow:hidden;
float:left;
}
#guild {
width:90px; height:126px; overflow:hidden;
float:left;
}
#screen {
width:82px; height:126px; overflow:hidden;
float:left;
}
#guide {
width:117px; height:126px; overflow:hidden;
float:left;
}
#layer {
width:682px; height:22px; overflow:hidden;
float:left;
}
</style>
</head>
<body bgcolor="white" text="black" style="background-image:url(/images/back.jpg'); background-repeat:repeat-x; background-attachment:fixed; background-position:0 0;" leftmargin="0" marginwidth="0" topmargin="0" onload="javascript:height()" marginheight="0">
<center>
<div id="header">
<div id="logo"><img src="/images/index_02.jpg" width="158" height="148" border="0" /></div>
<div id="main"><img src="/images/index_03.jpg" width="117" height="126" border="0" /></div>
<div id="lapis"><img src="/images/index_04.jpg" width="97" height="126" border="0" /></div>
<div id="cru"><img src="/images/index_05.jpg" width="89" height="126" border="0" /></div>
<div id="board"><img src="/images/index_06.jpg" width="90" height="126" border="0" /></div>
<div id="guild"><img src="images/index_07.jpg" width="90" height="126" border="0" /></div>
<div id="screen"><img src="/images/index_08.jpg" width="82" height="126" border="0" /></div>
<div id="guide"><img src="/images/index_09.jpg" width="117" height="126" border="0" /></div>
<div id="layer"></div>
</div>
<div style="text-align:left; width:840px;">
<div id="menu"><img src="/images/index_18.jpg" width="840" height="28" border="0" /></div>
<div id="left" style="background-image:url(/images/index_19.jpg)undefined;"></div>
<div id="left1">
<div class="login" style="margin-top:-15px;"><img class="zbxe_widget_output" widget="login_info" skin="login" colorset="default" /><img class="zbxe_widget_output" widget="logged_members" skin="logged" colorset="bachi" list_count="3" use_mid="total" /></div>
</div>
<div id="content" style='height:;'>{$content}</div>
<div id="right" style="background-image:url('/images/index_22.jpg');"></div>
</div>
<div id="footer"><img src=".//images/index_40.jpg" width="840" height="40" border="0" /></div>
</center>
</body>
</html>
제가 잘 하지는 않는데, 웹디자인을 할때에 FF 로 먼저 작업을 합니다.
그리고 IE에서 보기를 하는데, wrap 이 맞지 않을 경우에는 IE에서 CSS 가 제대로 먹지 않아서 그런다고 들었습니다.
그때 쓰는게, IE hack 을 씁니다.
FF로 먼저 작업을 하시고, IE hack 을 쓰시는게 좋을 꺼 같습니다. 도움이 되었으면 합니다. *^^*