제가 코딩한 겁니다만..

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

제가 코딩한 겁니다만..

Post by oragi »

하느라고 했는데도 문제가 있긴 하네요.
div를 주로 사용해서 css를 넣었는데 상관이
익스를 기준으로 삼는지라 익스에서만 실험했는데
파폭에선 좀 깨져 보이는군요.
잘하시는 분들 보시고 파폭에서 왜 깨져 나오는지 좀 알려주세요

html코드

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>amboss</title>
<link href="common/style.css" rel="stylesheet" type="text/css">
<link href="common/layout.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="common/common.js" type="text/javascript"></script>
</head>

<body
onLoad="MM_preloadImages('images/index_img04_ov.gif','images/index_img05_ov.gif','images/index_img06_ov.gif')">
<div id="wrap">
<div id="topmargin02"><div id="topmargin01"></div></div>
<div id="logo">
<div id="logo-image"><a href="#"><img src="images/logo.jpg" alt="로고" width="154" height="67" border="0"></a></div>
</div>
<div id="navigation"><img src="images/index_navigation.jpg" alt="네비게이션" width="684" height="109" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="88,42,170,73" href="#">
<area shape="rect" coords="237,40,325,72" href="#">
<area shape="rect" coords="397,44,496,72" href="#">
<area shape="rect" coords="546,13,575,24" href="#">
<area shape="rect" coords="589,13,632,24" href="#">
<area shape="rect" coords="644,13,676,25" href="#">
</map>
</div>
<div id="leftvisual">
<div id="portpolio">
<div class="show"><div class="inner"><a href="#"><img src="images/port01.jpg" alt="포트폴리오" border="0"></a></div>
</div>
<div class="numlook"><ul>
<li><a href="#"><img src="images/btn_01.gif" border="0"></a></li>
<li><a href="#"><img src="images/btn_02.gif" border="0"></a></li>
<li><a href="#"><img src="images/btn_03.gif" border="0"></a></li>
<li><a href="#"><img src="images/btn_04.gif" border="0"></a></li>
</ul></div>
<div class="pt_subject"><a href="#"><img src="images/pt_img01.gif" alt="포트폴리오제목" width="93" height="55" border="0"></a></div>
</div>
</div>
<div id="mainvisual"><img src="images/index_mainvisual.jpg" alt="비주얼" width="880" height="313"></div>
<div id="notice01">
<div class="board01">
<img src="images/index_img01.gif" alt="공지사항" border="0" usemap="#Map2">
<map name="Map2">
<area shape="rect" coords="210,6,245,15" href="#">
</map>
<ul>
<li><span class="b_sub"><img src="images/icon_01.gif" align="absmiddle"> <a href="#">[DVD 2.0] 어느 크리에이티...</a></span> <span class="b_day">2004-9-21</span></li>
<li><span class="b_sub"><img src="images/icon_01.gif" align="absmiddle"> <a href="#">[애드타임즈] 디자인 & 크리...</a></span> <span class="b_day">2004-9-21</span></li>
<li><span class="b_sub"><img src="images/icon_01.gif" align="absmiddle"> <a href="#">[애드타임즈] 슈트하우스...</a></span> <span class="b_day">2004-9-21</span></li>
<li><span class="b_sub"><img src="images/icon_01.gif" align="absmiddle"> <a href="#">신라브랜치 하반기 디자이너...</a></span> <span class="b_day">2004-9-21</span></li>
<li><span class="b_sub"><img src="images/icon_01.gif" align="absmiddle"> <a href="#">신라브랜치 하반기 디자이너...</a></span> <span class="b_day">2004-9-21</span></li>
</ul>
</div>
</div>
<div id="freeboard01">
<div class="board01">
<img src="images/index_img02.gif" alt="프리보드" border="0" usemap="#Map3">
<map name="Map3">
<area shape="rect" coords="210,8,246,21" href="#">
</map>
<ul>
<li><span class="b_sub"><img src="images/icon_01.gif" align="absmiddle"> <a href="#">[DVD 2.0] 어느 크리에이티...</a></span> <span class="b_day">2004-9-21</span></li>
<li><span class="b_sub"><img src="images/icon_01.gif" align="absmiddle"> <a href="#">[애드타임즈] 디자인 & 크리...</a></span> <span class="b_day">2004-9-21</span></li>
<li><span class="b_sub"><img src="images/icon_01.gif" align="absmiddle"> <a href="#">[애드타임즈] 슈트하우스...</a></span> <span class="b_day">2004-9-21</span></li>
</ul>
</div>
</div>
<div id="content01">
<div id="submenu01"><ul><li><a href="#"><img src="images/index_img10.gif" border="0"></a></li><li><a href="#"><img src="images/index_img11.gif" border="0"></a></li><li><a href="#"><img src="images/index_img12.gif" border="0"></a></li></ul>
</div>
<div id="quckmenu01">
<div id="selecter01"><img src="images/index_img15.gif" width="223" height="66" border="0" usemap="#Map4">
<map name="Map4">
<area shape="rect" coords="68,2,132,64" href="#">
<area shape="rect" coords="156,2,227,65" href="#">
<area shape="rect" coords="0,0,42,65" href="#">
</map>
</div>
</div>
</div>
<div id="footer">
<div id="infooter">
<ul>
<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/index_img04_ov.gif',1)"><img src="images/index_img04.gif" alt="company info" name="Image31" width="67" height="8" border="0"></a></li>
<li><img src="images/index_img07.gif" style="margin-right:11px;"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','images/index_img05_ov.gif',1)"><img src="images/index_img05.gif" alt="customer center" name="Image32" width="85" height="8" border="0"></a></li>
<li><img src="images/index_img07.gif" style="margin-right:11px;"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image33','','images/index_img06_ov.gif',1)"><img src="images/index_img06.gif" alt="recruit" name="Image33" width="36" height="8" border="0"></a></li>
</ul>
<img src="images/index_img08.gif" alt="주소" style="margin-top:10px">
<div id="footer_logo"><img src="images/index_img09.gif" alt="하단로고"></div>
</div>
</div>
<div id="verticalline01"></div>
<div id="verticalline02"></div>
</div>
</body>
</html>

레이아웃용 css

body {
width: 100%;
background-image: url(../images/index_bg_out.jpg);
background-repeat: repeat-x;
background-attachment: scroll;

}
#wrap {
width: 950px;
height: 1000px;
background-image: url(../images/index_bg.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
position: absolute;
left: 0;
top: 0px;
}
#logo {
width: 264px;
height: 109px;
left: 0;
top: 4px;
position: absolute;
}
#navigation {
width: 684px;
height: 109px;
position: absolute;
left: 265px;
top: 4px;
}
#leftvisual {
width: 264px;
height: 313px;
position: absolute;
left: 0px;
top: 113px;

}
#mainvisual {
width: 880px;
height: 313px;
position: absolute;
left: 265px;
top: 114px;
z-index: 1
}
#notice01 {
width: 264px;
height: 201px;
position: absolute;
left: 0px;
top: 427px;

}
#freeboard01 {
width: 264px;
height: 370px;
position: absolute;
left: 0px;
top: 629px;
background-image: url(../images/index_img03.gif);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: bottom left;
}
#content01 {
width: 684px;
height: 201px;
position: absolute;
left: 265px;
top: 427px;
}
#footer {
width: 684px;
height: 370px;
position: absolute;
left: 265px;
top: 629px;
}
#verticalline01 {
width: 1px;
height: 1000px;
position: absolute;
left: 265px;
top: 0px;
background-image: url(../images/index_bg_line.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
}
#verticalline02 {
width: 1px;
height: 1000px;
position: absolute;
left: 949px;
top: 0px;
background-image: url(../images/index_bg_line.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
}
#topmargin01 {
width: 950px;
height: 4px;
line-height: 1px;
font-size: 1px;
background-image: url(../images/index_bg_line.gif);
background-attachment: scroll;
background-repeat: repeat-y;
}
#topmargin02 {
width: 100%;
height: 4px;
line-height: 1px;
font-size: 1px;
background-color: #515151;
}
#background {
position: absolute;
left: 950px;
top: 0px;
height: 100px
background-attachment: scroll;
background-image: url(../images/index_bg_out.jpg);
background-repeat: repeat-x;
background-color: Blue;
}

/* dddddddddddddddddddddddddddddddddd */

#logo-image {
margin-top: 20px;
margin-left: 22px;
width: 154px;
height: 67px;
}
#portpolio{
margin-left: 35px;
margin-top: 39px;
width: 197px;
height: 217px;
}
.show {
width: 197px;
height: 152px;
background-color: #8D8D8D;
}
.inner {
width: 189px;
height: 144px;
margin: 4px 4px 4px 4px;
}
.numlook {
width: 90px;
height: 11px;
position: relative;
top: 8px;
left: 1px;
}
.numlook ul {
display: inline;
list-style-type: none;
margin:0 0 0 0;
}
.numlook li {
display: inline;
margin: 0 2px 0 0;
}
.pt_subject {
width: 93px;
height: 55px;
position: relative;
top: -9px;
left: 102px;
}
.board01 {
margin: 19px 10px 0 10px;
}
.board01 ul {
display: block;
margin: 12px 0 0 0;
list-style-type: none;
}
.board01 li {
display: block;
margin: 0 0 11px 0;
clear: both;
}
.board01 li span.b_sub {
display: block;
float: left;
}
.board01 li span.b_day {
display: block;
float: right;
}
#infooter {
margin: 18px 179px;
}
#infooter ul {
display: inline;
list-style-type: none;
margin:0 0 0 0;
}
#infooter ul li {
display: inline;
margin: 0 9px 0 0;
}
#footer_logo {
position: relative;
width: 148px;
height: 62px;
left: 355px;
top: -45px;
}
#submenu01 {
position: relative;
width: 236px;
height: 123px;
left: 58px;
top: 25px;
background-image: url(../images/index_img13.gif);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: right;
}
#quckmenu01 {
position: relative;
width: 340px;
height: 123px;
left: 306px;
top: -98px;
background-image: url(../images/index_img14.gif);
background-repeat: no-repeat;
background-attachment: scroll;
}
#submenu01 ul {
display: block;
margin: 15px 0 0 0;
list-style-type: none;
}
#submenu01 li {
display: block;
margin: 0 0 4px 0;
border-bottom: 1px solid #6A4C1D;
height: 21px;
width: 121px
}
#selecter01 {
position: relative;
width: 223px;
height: 66px;
left: 117px;
top: 30px
}
Top
Post Reply

Return to “Mozilla 웹 표준 포럼”



Who is online

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