ie / ff 계열에서 다른 출력 문제

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
댓글 게시
lswormnd
게시물: 1
참여됨: 2008 03 17 21:36 24
연락:

ie / ff 계열에서 다른 출력 문제

게시물 작성자 lswormnd » 2008 03 17 21:54 18

안녕하세요..
나름 div를 사용한 코딩을 해보고자 하는데.. 혼자 해결이 잘 안되는 부분이 있네요..
먼저 겪어보신 분들의 조언을 구합니다.
제가 볼 때 2개 페이지 거의 같은 구성을 띄고 있는데.. 2번은 익스만 깨져서 나옵니다.
아래가 파일 내용입니다.
그리고 꼭 해당문제 아니더라도, 코드에 대한 이런저런 조언 주신다면 감사히 듣고 배우겠습니다. :wink:

잘나오는 파폭 링크 http://blog.naver.com/special_m/70028926569
중간부터 깨지는 익스 링크 http://blog.naver.com/special_m/70028926785


/visual/default.css 의 내용

body
{
margin: 0 0 0 0;
}

body,input,td,select,textarea {
font-size: 9pt;
}

img {
border: none;
}

div.fl
{
float:left; width:45%; clear:both; padding:2px; text-align:left;
}
div.flm
{
float:left; width:90px; clear:both; padding:2px;
}
div.fr
{
float:left; width:45%; padding:2px; text-align:left;
}

div.fls
{
float:left; width:17%; clear:both; padding:2px; text-align:left; font-weight: bold;
}
div.flb
{
float:left; width:17%; padding:2px; text-align:left; font-weight: bold;
}
div.frs
{
float:left; width:31%; padding:2px; text-align:left;
}

table.list
{
border-collapse: collapse;
width: 80%;
}

td.h
{
padding:3px;
background-color: lightpink;
border: solid 1px #333333;
font-weight: bold;
}

td.i
{
padding:3px;
border: solid 1px #333333;
}

#menu_title {
padding: 6px;
font-size: 10pt;
font-weight: bold;
}

#search_option_bar {
padding: 7px;
background-color: sandybrown;
width: 99%;
height: 60px;
font-weight: bold;
}

#list_result_area {
padding-top: 20px;
padding: 12px;
text-align: center;
width: 96%;
height: 60px;
}

#bottom_bar {
padding: 7px;
text-align: right;
width: 96%;
padding-right:12px;
clear:both;
}





소스 1 (익스 파폭 모두 잘보이는 페이지)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=euc-kr" />
<link rel="stylesheet" href="/visual/default.css" />
<script type="text/javascript">
</script>
</head>
<body>
<a href="/"><img src="/visual/gl_head_base.gif" /></a>
<div style="width:99%; height:32px; background-color:violet; padding-top:12px; padding-left:7px;">
<a href="javascript:;">부품관리</a> &nbsp;
<a href="javascript:;">부품주문</a> &nbsp;

<a href="javascript:;">포인트관리</a> &nbsp;
<a href="javascript:;">커뮤니티</a> &nbsp;
<a href="/agency">대리점관리</a> &nbsp;
<a href="/member">고객관리</a> &nbsp;
<a href="javascript:;">정품승인</a> &nbsp;
<a href="javascript:;">정비예약관리</a> &nbsp;

<a href="javascript:;">게시판관리</a> &nbsp;
<a href="javascript:;">라인업관리</a> &nbsp;
<a href="javascript:;">디자인관리</a> &nbsp;
<a href="/logout.php" onclick="if (confirm('지금 로그아웃하시겠습니까?')) { return true; } else { return false; }">로그아웃</a> &nbsp;
</div>
<div id="menu_title"> | 대리점관리</div><div id="list_result_area">

<div class="fls">점포명</div><div class="frs">스즈끼 본사</div>
<div class="flb">
웹사이트노출
</div><div class="frs">
<input type="checkbox" name="ag_display" disabled /></div>
<div class="fls">아이디</div><div class="frs">suzuki</div>
<div class="flb">비밀번호</div><div class="frs">********</div>

<div class="fls">대표자</div><div class="frs">홍길동</div>
<div class="flb">구분</div><div class="frs">
<input type="checkbox" name="acc_shop" checked disabled />스즈끼전문판매점
<input type="checkbox" name="acc_shop_partner" checked disabled />판매협력점
</div>

<div class="fls">
지역1(시/도)</div><div class="frs">서울 </div>

<div class="flb">
지역2(구/군)</div><div class="frs">강동구 </div>
<div class="fls">
일반전화</div><div class="frs">02-404-2222 </div>
<div class="flb">
팩스</div><div class="frs">02-444-2222 </div>

<div class="fls">
휴대전화</div><div class="frs">010-4044-2767 </div>
<div class="flb">
&nbsp;</div><div class="frs">
</div>
<div class="fls">
주소</div><div class="frs">138-138 <br />

서울시 송파구 오금동 <br />
47-3번지 화성빌라 301호 </div>
<div class="flb">
&nbsp;</div><div class="frs">
</div>
<div class="fls">
인사말</div><div class="frs">안녕하세요 스즈끼 본사 입니다. </div>

<div class="flb">
&nbsp;</div><div class="frs">
</div>
<div class="fls">
이미지 1</div><div class="frs">140_cd_breys1.jpg <img src='../upload/140_cd_breys1.jpg' width="80" height="45" /> </div>
<div class="flb">
이미지 2</div><div class="frs">%BD%BA%C1%EE%C5%B0%C4%DA%B8%AE%BE%C6.jpg <img src='../upload/%25BD%25BA%25C1%25EE%25C5%25B0%25C4%25DA%25B8%25AE%25BE%25C6.jpg' width="80" height="45" /> </div>

<div class="fls">
약도 이미지</div><div class="frs"> </div>
</div>
<div id="bottom_bar">
<input type="button" value="수정" onclick="location.href = 'formAgEdit.php?acc_uid=7';" />
<input type="button" value="삭제" onclick="if (confirm('정말 삭제하시겠습니까?')) { location.href = 'removeAg.php?acc_uid=7'; return true; } else { return false; }" />
<input type="button" value="목록" onclick="location.href = './';" />
</div>

</body>
</html>






소스 2 (파폭만 잘보이는 페이지)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=euc-kr" />
<link rel="stylesheet" href="/visual/default.css" />
<script type="text/javascript">
function checkValues(fr)
{
if (fr.ag_name.value == "")
{
alert("점포명을 입력하세요.");
fr.ag_name.focus();
return false;
}
//...생략
else
return true;
}
</script>
</head>
<body>
<a href="/"><img src="/visual/gl_head_base.gif" /></a>
<div style="width:99%; height:32px; background-color:violet; padding-top:12px; padding-left:7px;">
<a href="javascript:;">부품관리</a> &nbsp;
<a href="javascript:;">부품주문</a> &nbsp;

<a href="javascript:;">포인트관리</a> &nbsp;
<a href="javascript:;">커뮤니티</a> &nbsp;
<a href="/agency">대리점관리</a> &nbsp;
<a href="/member">고객관리</a> &nbsp;
<a href="javascript:;">정품승인</a> &nbsp;
<a href="javascript:;">정비예약관리</a> &nbsp;

<a href="javascript:;">게시판관리</a> &nbsp;
<a href="javascript:;">라인업관리</a> &nbsp;
<a href="javascript:;">디자인관리</a> &nbsp;
<a href="/logout.php" onclick="if (confirm('지금 로그아웃하시겠습니까?')) { return true; } else { return false; }">로그아웃</a> &nbsp;
</div>
<div id="menu_title"> | 대리점관리</div><form action="addAg.php" method="post" enctype="multipart/form-data" onsubmit="return checkValues(this);">
<div id="list_result_area">


<div class="fls">점포명</div><div class="frs"><input type="text" name="ag_name" /></div>
<div class="flb">
웹사이트노출
</div><div class="frs">
<input type="checkbox" name="ag_display" checked /></div>
<div class="fls">아이디</div><div class="frs"><input type="text" name="acc_id" /></div>
<div class="flb">비밀번호</div><div class="frs"><input type="password" name="acc_pass" /><br /><input type="password" name="acc_pass_re" />비밀번호확인</div>

<div class="fls">대표자</div><div class="frs"><input type="text" name="ag_president" maxlength="15" /></div>
<div class="flb">구분</div><div class="frs">
<input type="checkbox" name="acc_shop" />스즈끼전문판매점
<input type="checkbox" name="acc_shop_partner" />판매협력점
<input type="checkbox" name="acc_service" />서비스지정점
<input type="checkbox" name="acc_service_partner" />서비스협력점</div>
<div class="fls">
지역1(시/도)</div><div class="frs"><select name="ag_region_a">

<option value="none"> - </option>
<option value="서울">서울</option>
<option value="부산">부산</option>
<option value="인천">인천</option>
<option value="대구">대구</option>
<option value="광주">광주</option>

<option value="대전">대전</option>
<option value="울산">울산</option>
<option value="경기">경기</option>
<option value="강원">강원</option>
<option value="충청">충청</option>
<option value="전라">전라</option>

<option value="경상">경상</option>
<option value="제주">제주</option>
</select>
</div>
<div class="flb">
지역2(구/군)</div><div class="frs"><input type="text" name="ag_region_b" />
</div>

<div class="fls">
일반전화</div><div class="frs"><input type="text" name="ag_tel_1" size="4" maxlength="4" />-<input type="text" name="ag_tel_2" size="5" maxlength="5" />-<input type="text" name="ag_tel_3" size="5" maxlength="5" />
</div>
<div class="flb">
팩스</div><div class="frs"><input type="text" name="ag_fax_1" size="4" maxlength="4" />-<input type="text" name="ag_fax_2" size="5" maxlength="5" />-<input type="text" name="ag_fax_3" size="5" maxlength="5" />
</div>

<div class="fls">
휴대전화</div><div class="frs"><input type="text" name="ag_cell_1" size="4" maxlength="4" />-<input type="text" name="ag_cell_2" size="5" maxlength="5" />-<input type="text" name="ag_cell_3" size="5" maxlength="5" />
</div>
<div class="flb">
&nbsp;</div><div class="frs">
</div>
<div class="fls">

주소</div><div class="frs"><input type="text" name="ag_zip_1" size="4" maxlength="5" />-<input type="text" name="ag_zip_2" size="4" maxlength="5" />
<br />
<input type="text" name="ag_addr_a" size="30" maxlength="50" />
<br />
<input type="text" name="ag_addr_b" size="30" maxlength="60" />
</div>
<div class="flb">
&nbsp;</div><div class="frs">

</div>
<div class="fls">
인사말</div><div class="frs"><textarea name="ag_greeting" style="width:96%; height:100px;"></textarea>
</div>
<div class="flb">
&nbsp;</div><div class="frs">
</div>
<div class="fls">

이미지 1</div><div class="frs"><input type="file" name="ag_image_a" />
</div>
<div class="flb">
이미지 2</div><div class="frs"><input type="file" name="ag_image_b" />
</div>
<div class="fls">
약도 이미지</div><div class="frs"><input type="file" name="ag_image_map" />

</div>
<div class="flb">
</div><div class="frs">
</div>



</div>
<div id="bottom_bar">
<input type="submit" value="입력" />
<input type="button" value="취소" onclick="history.back();" />
</div>
</form>

</body>
</html>

댓글 게시

누군가 접속

유저들이 이 포럼을 탐색중: 가입된 유저 없음 그리고 18 손님들