묻고답하기
웹표준 코딩 익스플로러 다시 질문합니다.
2012.12.23 19:06
http://sujubool.com/bbs/zboard.php?id=data
사이트 주소인데요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title></title>
<link rel="stylesheet" href="http://sujubool.com/1/style2.css" type="text/css" />
<script type='text/javascript' src="http://sujubool.com/1/java.js"></script>
<body>
<div id="top">
<div id="logo"><img src=http://sujubool.com/1/logo2.jpg></div></div>
<div id="menubg1"><div id="menubg2">
<div id="menu"><div id="menu1"><a href="http://sujubool.com/intro.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('notice','','http://sujubool.com/1/notice_on.jpg',1)"><imgsrc="http://sujubool.com/1/notice_off.jpg" width="159" height="29" id="notice" border="0"></a></div>
<div id="menu2"><a href="http://sujubool.com/bbs/zboard.php?id=data" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('data','','http://sujubool.com/1/data_on.jpg',1)"><img src="http://sujubool.com/1/data_off.jpg"width="159" height="29" id="data" border="0"></a></div>
<div id="menu3"><a href="http://sujubool.com/bbs/zboard.php?id=memo" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('memo','','http://sujubool.com/1/memo_on.jpg',1)"><imgsrc="http://sujubool.com/1/memo_off.jpg" width="159" height="29" id="memo" border="0"></a></div>
<div id="menu4"><a href="http://sujubool.com/bbs/zboard.php?id=board" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('board','','http://sujubool.com/1/board_on.jpg',1)"><imgsrc="http://sujubool.com/1/board_off.jpg" width="159" height="29" id="board" border="0"></a></div>
<div id="menu5"><a href="http://sujubool.com/bbs/zboard.php?id=support" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('support','','http://sujubool.com/1/support_on.jpg',1)"><imgsrc="http://sujubool.com/1/support_off.jpg" width="159" height="29" id="support" border="0"></a></div>
<div id="menu6"><a href="http://sujubool.com/bbs/zboard.php?id=master" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('master','','http://sujubool.com/1/master_on.jpg',1)"><imgsrc="http://sujubool.com/1/master_off.jpg" width="159" height="29" id="master" border="0"></a></div>
</div></div></div></div>
<div id="middle"></div>
<div id="main">
<div id="main2">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align:center;
margin:0;
padding:0;
height: 100%;
}
#top {
background-color: #ffffff;
width: 100%;
height: 176px;
text-align:left;
border-top:6px solid #555555;
}
#logo {
background-color: #ffffff;
width: 979px;
height: 176px;
position: relative ; top : -6px;
background-image: url(http://sujubool.com/1/bg.jpg);
margin:0 auto;
text-align:left;
}
#menubg1 {
background-color: #555555;
width: 100%;
height: 39px;
}
#menubg2 {
background-color: #555555;
width: 1079px;
height: 39px;
margin:0 auto;
}
#menu {
background-color: #555555;
width: 979px;
height: 29px;
margin:0 auto;
padding-top:5px;
text-align:left;
}
#menu1 {
background-color: #555555;
width: 164px;
height: 29px;
text-align:left;
float:left
}
#menu2 {
background-color: #555555;
width: 164px;
height: 29px;
text-align:left;
float:left
}
#menu3 {
background-color: #555555;
width: 164px;
height: 29px;
text-align:left;
float:left
}
#menu4 {
background-color: #555555;
width: 164px;
height: 29px;
text-align:left;
float:left
}
#menu5 {
background-color: #555555;
width: 164px;
height: 29px;
text-align:left;
float:left
}
#menu6 {
background-color: #555555;
width: 159px;
height: 29px;
text-align:left;
float:left
}
#middle {
background-color: #ffffff;
width: 100%;
height: 60px;
}
#main {
background-color: #ffffff;
width: 100%;
height: auto;
}
#main2 {
background-color: #ffffff;
width: 979px;
height: auto;
margin:0 auto;
text-align:left;
}
#middle2 {
background-color: #ffffff;
width: 100%;
height: 92px;
}
#foot2 {
background-color: #555555;
width: 100%;
height: 205px;
border-top:4px solid #4cb4b3;
}
#foot3 {
width: 979px;
height: 201px;
margin:0 auto;
text-align:left;
}
밑에 질문을 올렸었는데 답변자분이 이해를 잘못하신 거 같아서 글 다시 올려요.
제가 원하는 건 첨부 1 이미지인데요.
크롬과 모바일에서는 제가 원하는 첨부 1 이미지처럼 출력이 됩니다.
크롬과 모바일로 볼땐 이상이 없어요.
문제는 익스플로러인데요.
익스플로러에서는 첨부 2 이미지처럼 출력이 됩니다.
#logo 이 부분 사이즈가 979px인데 979px사이즈인 div가 익스플로러에서만 중앙정렬이 안돼요.
내부 이미지는 979px 사이즈 div의 왼쪽에 붙게끔 되어있구요.
로고 자체를 중앙정렬 하려는 게 아니고 div를 중앙정렬하고 싶은 건데 익스플로러에서만 혼자 왼쪽에 붙어있어서요^_ㅠ
심지어 밑에 카피라이트 부분도 979px 사이즈로 만들어진 건데 저건 div가 중앙정렬 되거든요.
역시 이미지는 979px 사이즈 div의 왼쪽에 붙어있구요.
그리고 위 소스를 제로보드로 출력하지 않고 그냥 html로 올리면 제가 원하는 첨부 1 이미지처럼 출력이 돼요.
근데 제로보드 상단, 하단으로 출력하면 첨부 2 이미지처럼 되네요.
도대체 왜 제로보드, 익스플로러에서만 div가 왼쪽으로 붙는 이유 좀 알려주세요ㅠ_ㅠ
#logo {
background-color: #ffffff;
width: 979px;
height: 176px;
position: relative ; top : -6px;
background-image: url(http://sujubool.com/1/bg.jpg);
margin:0 auto;
text-align:left;
}
DTD 선언이 필요합니다.
IE6만의 버그로 DTD선언 이전에 문자가 있으면 몇가지 오류가 생기더군요.
예
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
그리고
로 바꾸세요.