초보자 입니다 조금만 도와주세요. 정보
초보자 입니다 조금만 도와주세요.본문
고수님의 도움이 조금 필요해 질문게시판에 올려봅니다.
2가지 질문이 있습니다 답변좀 부탁드릴게요.
첫번쨰 질문
첫번쨰 스크린샷 보시는바와 같이 , IE7 에서 보면 저렇게 최신글이 밀려나오는데.
구글크롬에서 보면 정상적으로 나오는데 왜이럴까요?
index.php 소스입니다..
<?
include_once("./_common.php");
include_once("$g4[path]/lib/latest.lib.php");
$g4['title'] = "";
$main_page = "1";
include_once("./_head.php");
?>
<style type="text/css">
.item { margin:0 0 10px 0; }
</style>
<table border="0" cellpadding="0" cellspacing="0" width="75%">
<tr>
<div class="latest-block">
<table width="918" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<div class="latest-block_m1">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-bottom:1px solid #e5e5e5;">
<tr>
<!--- 메인중앙시작 --->
<div class="latest-block">
<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<div class="latest-block_m1">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-bottom:1px solid #e5e5e5;">
<tr>
<!--- 좌측 --->
<td width="260" valign="top" style="border-right:1px solid #e5e5e5;">
<div><!--- 베너영역 --->
</div>
<div class="m-blank2"></div>
<?=latest("basic", "notice", 5, 50);?>
<?=latest("basic", "B31", 5, 50);?>
<?=latest("basic", "B03", 5, 50);?>
<?=latest("basic", "B01", 5, 50);?>
<?=latest("basic", "B04", 5, 50);?>
<div class="m-blank"></div>
<div class="m-blank2"></div>
<!--- 좌측 끝 -->
<!--- 중앙 --->
<td width="280" valign="top">
<div class="m-blank"></div>
<?=latest("basic", "B32", 5, 50);?>
<?=latest("basic", "B04", 5, 50);?>
<?=latest("basic", "B33", 5, 50);?>
<?=latest("basic", "sexy", 5, 50);?>
<?=latest("basic", "B100", 5, 50);?>
<div class="m-blank"></div>
<div class="m-blank"></div>
<div class="m-blank"></div>
<!--- 중앙 끝 --->
<!--- 우측 --->
<td width="260" valign="top" style="border-left:1px solid #e5e5e5;">
<div style="margin:0 0px 0 0;"><!--- 베너영역 --->
</div>
<div class="m-blank2"></div>
<?=latest("basic", "a", 5, 50);?>
<?=latest("basic", "c", 5, 50);?>
<?=latest("basic", "B02", 5, 50);?>
<?=latest("basic", "B12", 5, 50);?>
<?=latest("basic", "e", 5, 50);?>
<?=latest("basic", "B05", 5, 50);?>
<div class="m-blank"></div>
<!--- 베너영역 --->
</div>
</div>
<div class="m-blank2"></div>
<!--- 우측 끝 --->
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<?
include_once("./_tail.php");
?>
두번쨰 질문
메뉴바 스크린샷 보시는바와 같이, 저렇게 겹쳐서 나옵니다
이것도 IE7 에서 확인한결과이고 구글크롬에서보면 완전 정상적으로 나옵니다 ㅠ_ㅠ
CSS 소스입니다..
/* Menu Common */
.menu{ position:relative; overflow:visible; border:1px solid; font-size:12px; line-height:normal; *zoom:1; white-space:nowrap; font-family:Tahoma, Geneva, sans-serif;}
.menu:after{ content:""; display:block; clear:both;}
.menu .inset{ position:relative; overflow:visible; border:1px solid; z-index:102; *zoom:1; background-image:url(http://wjdys.cdn2.cafe24.com/css_mu/bgBar.png); background-repeat:repeat-x; _background-image:none;}
.menu .inset:after{ content:""; display:block; clear:both;}
.menu ul{ float:left; list-style:none; margin:-1px 0; padding:0;}
.menu ul:after{ content:""; display:block; clear:both;}
.menu li{ position:relative; z-index:101; float:left;}
.menu a{ position:relative; float:left; padding:10px 0 11px 0; *padding:10px 0 10px 0; margin-bottom:-1px; text-decoration:none !important; cursor:pointer;}
.menu a span{ padding:0 20px; height:14px; color:#fff; font-weight:bold; vertical-align:top;}
.menu a span .i{ display:inline-block;padding:0;border:0 !important; font-size:0; line-height:0; overflow:hidden; vertical-align:top;opacity:.4; filter:alpha(opacity=40);}
.menu .gradient{ display:none; _display:block; position:absolute; z-index:101; top:0; left:0; width:100%; height:35px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wjdys.cdn2.cafe24.com/css_mu/bgBar.png', sizingMethod='scale');}
.menu .shadow{ position:absolute; bottom:-3px; left:0; width:100%; height:0; font-size:0; line-height:0; overflow:hidden; margin:1px -1px; z-index:101; border:1px solid #ccc; border-top:0;}
/* Menu Major */
.menu .major{ position:relative; z-index:102; float:left;}
.menu .major a{ overflow:hidden;}
.menu .major span{ border-left:1px solid; border-right:1px solid; _zoom:1;}
/* Menu Sub */
.menu .major .sub{ position:absolute; top:100%; left:-1px; margin:2px 0 0 0; display:none; width:300px; *width:auto;}
.menu .major li.active .sub{ display:block;}
.menu .major .sub ul{ margin:0; padding:1px; border:1px solid #878787; border-top:0; background:#fff;}
.menu .major .sub li{ width:100%; *width:auto; float:none; clear:both; display:block; _display:inline; border:0; margin:0; }
.menu .major .sub a{ width:100%; _width:auto; float:none; clear:both; display:block; padding:0 !important; margin:0; background-image:none !important; filter:none;}
.menu .major .sub a span{ display:block; height:auto; padding:5px 13px; font-weight:normal; color:#000; border:0; _zoom:0; _text-decoration:none; }
/* Menu Aside */
.menu .aside{ position:relative; z-index:102; float:right; border-left:1px solid; background:url(http://wjdys.cdn2.cafe24.com/css_mu/bgBarEnd.png); *background:none; /*_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wjdys.cdn2.cafe24.com/css_mu/bgBarEnd.png', sizingMethod='scale');*/}
.menu .aside ul{ border-left:1px solid; padding-left:5px;}
.menu .aside a{ padding-left:10px; *padding-top:11px; }
.menu .aside span{ font-weight:normal; padding:0 12px 0 18px;}
.menu .aside li span{ display:inline-block; height:14px;}
.menu .aside .m1 span{ background:url(http://wjdys.cdn2.cafe24.com/css_mu/iconHistory.png) no-repeat 0 center; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wjdys.cdn2.cafe24.com/css_mu/iconHistory.png', sizingMethod='crop');}
.menu .aside .m2 span{ background:url(http://wjdys.cdn2.cafe24.com/css_mu/iconSetup.png) no-repeat 0 center; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wjdys.cdn2.cafe24.com/css_mu/iconSetup.png', sizingMethod='crop');}
/* Menu Aside Sub */
.menu .aside .sub{ position:absolute; top:100%; right:-2px; margin:2px 0 0; display:none; width:300px; *width:auto;}
.menu .aside li.active .sub{ display:block;}
.menu .aside .sub ul{ float:right; margin:0; padding:1px; border:1px solid #878787; border-top:0; background:#fff;}
.menu .aside .sub li{ width:100%; *width:auto; float:none; clear:both; display:block; _display:inline; border:0; margin:0;}
.menu .aside .sub a{ width:100%; _width:auto; float:none; clear:both; display:block; padding:0 !important; margin:0; background-image:none !important; filter:none; overflow:hidden;}
.menu .aside .sub a span{ display:inline-block; padding:5px 20px; font-weight:normal; color:#767676 !important; border:0; _zoom:0; background-image:none !important; filter:none;}
.menu .aside .sub a:hover,
.menu .aside .sub a:active,
.menu .aside .sub a:focus{ background:#eee;}
/* Menu Violet */
.mcViolet{ border-color:#6755bf; border-bottom-color:#4a3c96;}
.mcViolet .inset{ border-color:#8e7de1; border-bottom-color:#6c5dbb; background-color:#6251b7;}
.mcViolet .major span{ border-left-color:#7363c5; border-right-color:#5c4dac;}
.mcViolet .aside{ border-color:#5849a4;}
.mcViolet .aside ul{ border-color:#7563cc;}
.mcViolet .aside a span{ color:#dbd7ee; }
.mcViolet .major.m1 .m1,
.mcViolet .major.m2 .m2,
.mcViolet .major.m3 .m3,
.mcViolet .major.m4 .m4,
.mcViolet .major.m5 .m5,
.mcViolet .major.m6 .m6,
.mcViolet .major.m7 .m7,
.mcViolet .major.m8 .m8,
.mcViolet .major.m9 .m9,
.mcViolet .major.m10 .m10,
.mcViolet .major.m11 .m11,
.mcViolet .major.m12 .m12,
.mcViolet .major li.active{ border-color:#6755bf;}
.mcViolet .major .sub a:hover,
.mcViolet .major .sub a:active,
.mcViolet .major .sub a:focus{ background-color:#f0eef8;}
도움좀 부탁드릴꼐요 고수님.
댓글 전체
그것은요 익스7은 자기들멋대로 출력하도록 되어있어서그래요.
구글 크롬은 웹표준을 준수했구요~
익스7에서도 <! doctype html> 이런 문서타입(DTD)을 설정해준다면 어느정도는 표준에맞게 출력이 된답니다.
하지만 버그가 많구요.
익스8 정도되야 DTD 설정이 제대로 먹힌다고 볼수있네요.
때문에 크로스 브라우징을 생각하신다면 DTD 정의하시고 항상 익스6,8과 크롬이나 파폭으로 테스트 하시면서 하셔야합니다.
뭐.. 그냥 난 익스플로러에만 맞으면 되겠다 싶으시면 DTD 정의안하시고 하셔도되고요.^^
구글 크롬은 웹표준을 준수했구요~
익스7에서도 <! doctype html> 이런 문서타입(DTD)을 설정해준다면 어느정도는 표준에맞게 출력이 된답니다.
하지만 버그가 많구요.
익스8 정도되야 DTD 설정이 제대로 먹힌다고 볼수있네요.
때문에 크로스 브라우징을 생각하신다면 DTD 정의하시고 항상 익스6,8과 크롬이나 파폭으로 테스트 하시면서 하셔야합니다.
뭐.. 그냥 난 익스플로러에만 맞으면 되겠다 싶으시면 DTD 정의안하시고 하셔도되고요.^^
어떤방식으로 하면될까요...부탁드립니다
head.sub.php 파일에서
<!-- <! DOCTYPE html 어쩌꾸 > -->
이렇게 주석처리되어있는부분이있을겁니다.
<!-- --> 이거를 없애서주세요. 그러면 그누보드에서 dtd가 정의됩니다.
위에 제가 쓴 말그대로일뿐입니다...
html 문서에서 가장 첫째줄에 저렇게 dtd 정의가 들어가면 모든 브라우져에서 표준모드로 랜더링을합니다. 단 익스6과 7에서는 표준을 준수하지않아서 버그가생기는거구요.
크로스브라우징은 입문자에게는 매우 난해한 과제일겁니다.
일단 스스로 크로스 브라우징을 위해서 무엇을할수있나 연구해보시고, 정안돼시면 그것은 다음 홈페이지를 만드실때 하시도록 하세요.
그리고 2번째 질문은.. css만 달랑올리심 모르져.
대충 보면,, 추측원인1은, 서브메뉴 소스의 가장 바깥 엘리먼트의 css 속성에서 z-index 가 컨텐츠부분보다 낮게 설정이 되어있는경우입니다.
추측원인2는 해당 서브메뉴 소스의 가장 바깥 엘리먼트가 배경색상이 지정이안되서 투명하게 보이는겁니다.
<!-- <! DOCTYPE html 어쩌꾸 > -->
이렇게 주석처리되어있는부분이있을겁니다.
<!-- --> 이거를 없애서주세요. 그러면 그누보드에서 dtd가 정의됩니다.
위에 제가 쓴 말그대로일뿐입니다...
html 문서에서 가장 첫째줄에 저렇게 dtd 정의가 들어가면 모든 브라우져에서 표준모드로 랜더링을합니다. 단 익스6과 7에서는 표준을 준수하지않아서 버그가생기는거구요.
크로스브라우징은 입문자에게는 매우 난해한 과제일겁니다.
일단 스스로 크로스 브라우징을 위해서 무엇을할수있나 연구해보시고, 정안돼시면 그것은 다음 홈페이지를 만드실때 하시도록 하세요.
그리고 2번째 질문은.. css만 달랑올리심 모르져.
대충 보면,, 추측원인1은, 서브메뉴 소스의 가장 바깥 엘리먼트의 css 속성에서 z-index 가 컨텐츠부분보다 낮게 설정이 되어있는경우입니다.
추측원인2는 해당 서브메뉴 소스의 가장 바깥 엘리먼트가 배경색상이 지정이안되서 투명하게 보이는겁니다.
