묻고답하기
레이아웃 - 크롬에서 깨져요
2010.10.25 17:56
저희 교회 홈페이지는
익스플로러 7이상에서 잘 작동합니다.
하지만,
구글 크롬이나, 사파리에서 보며
내용이 밀리는 현상이 발생합니다..
원인이 뭘까요?
도와 주실 수 있는분 없으신이요?
교회 홈페이지 입니다.
http://www.inskyc.net
그리고 혹시나 해서 레이아웃
태그도 한번 적어 봅니다.
<!--%import("css/default.css")-->
<div id="layoutBody">
<div id="header">
<div id="headerTop">
<div id="headerTopLeft">
<a style="width:46px; height:18px; margin-right:4px; float:left; display:block;" href="{$layout_info->homepage_url}"><img src="images/header_btn_home.gif"></a>
<!--최상단 좌측 HOME 우측 내용-->
<div id="headerTopLeftHomeRight">
<!--@if($layout_info->headerTopLeftHomeRight)-->
{$layout_info->headerTopLeftHomeRight}
<!--@end-->
</div>
<!--최상단 우측 내용-->
<div id="headerTopRight">
<!--@if($layout_info->headerTopRight)-->
{$layout_info->headerTopRight}
<!--@end-->
</div>
</div>
</div>
<div id="headerMiddle">
<!--상단로고-->
<!--@if($layout_info->headerMiddleLogo)-->
<div id="headerMiddleLogo">
<a style="width:115px; height:28px; display:block;" href="{$layout_info->homepage_url}"><img src="{$layout_info->headerMiddleLogo}" width="115" height="28" /></a>
</div>
<!--@end-->
<!--상단로고 우측 선택된 1차메뉴-->
<div id="headerMiddleLogoLeftFirstMenu">
<ul id="headerMiddleLogoLeftFirstMenuUl">
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<!--@end-->
<!--@endif--><!--@endforeach-->
</ul>
</div>
<!--상단중앙 배너이미지-->
<!--@if($layout_info->headerMiddleCenterBnr)-->
<div id="headerMiddleCenterBnr">
<a style="width:300px; height:50px; display:block;" href="{$layout_info->headerMiddleCenterBnrUrl}" target="centerBnr"><img src="{$layout_info->headerMiddleCenterBnr}" width="300" height="50" /></a>
</div>
<!--@end-->
<!--상단중앙 우측 내용-->
<!--@if($layout_info->headerMiddleRight)-->
<div id="headerMiddleRight">
{$layout_info->headerMiddleRight}
</div>
<!--@end-->
</div>
<div id="headerMenu">
<div id="headerMenuTop">
<img style="float:left;" src="images/nav_barBgLeft.gif" />
<div id="headerMenuFirst">
<!--상단 1차메뉴-->
<ul id="headerMenuFirstUl">
{@ $firstMenuCount=1}
<!--@foreach($main_menu->list as $key => $val)-->
<!--@if($val['link'])-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" onmouseover="showSubmenu({$firstMenuCount})" <!--@if($val['open_window']=='Y'+ '+ ')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<!--@endif-->
{@ $firstMenuCount++}
<!--@endforeach-->
</ul>
<!--상단 1차메뉴 우측 내용-->
<!--@if($layout_info->headerMenuFirstRight)-->
<img style="float:left;" src="images/sub_barBgLeft.gif" />
<div id="headerMenuFirstRight">
{$layout_info->headerMenuFirstRight}
</div>
<img src="images/sub_barBgRight.gif" />
<!--@end-->
<!--상단 1차메뉴 우측 검색창-->
<div id="headerMenuFirstRightSearch">
<form action="{getUrl()}" method="post">
<!--@if($vid)-->
<input type="hidden" name="vid" value="{$vid}" />
<!--@end-->
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="hidden" name="search_target" value="title_content" />
<input name="is_keyword" type="text" class="inputText" title="keyword" />
<input type="image" src="images/btn_search.gif" alt="{$lang->cmd_search}" class="submit" />
</form>
</div>
</div>
<img src="images/nav_barBgRight.gif" />
</div>
<div id="headerMenuBottom">
<!--상단 2차메뉴-->
<div id="headerMenuSecond">
{@ $firstMenuCount=1}
<!--@foreach($main_menu->list as $key => $val)-->
{@ $menu_1st_2 = $val }
<ol id="headerMenuSecondOl{$firstMenuCount}">
<!--@foreach($menu_1st_2['list'] as $key => $val)--><!--@if($val['+ 'link'])-->
<!--@if($val['selected'])-->
{@ $menu_2nd = $val }
<!--@end-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a>
<!--@endif--><!--@endforeach-->
</ol>
{@ $firstMenuCount++}
<!--@endforeach-->
</div>
<div id="headerMenuBottomRight">
<!--상단 2차메뉴 우측 로그인정보 좌측 내용-->
<!--@if($layout_info->headerMenuBottomRightLeft)-->
<div id="headerMenuBottomRightLeft">
{$layout_info->headerMenuBottomRightLeft}
</div>
<!--@end-->
<!--상단 2차메뉴 우측 로그인정보-->
<ul id="headerMenuBottomRightLoginUl">
<!--@if($logged_info)-->
<li><a href="{getUrl('act','+ 'dispMemberLogout')}">로그아웃</a></li>
<li><a href="{getUrl('act','dispMemberInfo')}">정보수정</a></li>
<!--@if($logged_info->is_admin=="Y" && !$site_module_info->site_srl)-->
<li><a href="{getUrl(','module','admin')}" onclick="window.open(this.href);return false;">{$lang->cmd_management}</a>
<!--@end-->
<!--@else-->
<li><a href="#" onclick="showLoginForm()">로그인</a></li>
<li><a href="{getUrl('act','dispMemberSignUpForm')}">회원가입</a></li>
<!--@end-->
</ul>
</div>
<!--상단 2차메뉴 우측 로그인정보 클릭 시 나타나는 로그인폼-->
<div id="headerMenuBottomRightLoginWiget">
<img src="./images/blank.gif" class="zbxe_widget_output" widget="login_info" skin="xe_official" colorset="{$layout_info->colorset}" />
</div>
</div>
</div>
</div>
<!--컨텐트 시작-->
<div id="content">
<div id="contentLeft">
<div id="contentLeftMenu">
<!--컨텐트 좌측 선택된 2차메뉴-->
<ul id="contentLeftSecondMenuUl">
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<!--@end-->
<!--@endif--><!--@endforeach-->
</ul>
<!--컨텐트 좌측 3차,4차메뉴-->
<ol id="contentLeftThirdMenuOl">
<!--@foreach($menu_2nd['list'] as $key => $val)--><!--@if($val['link'+ '])-->
<li <!--@if($val['selected'+ '])-->class="on"<!--@end-->><img style="padding:0px 5px 0px 15px; float:left;" src="<!--@if($val['selected'])-->images/icon_subMenu_on.gif<!--@else-->images/icon_subMenu_off.gif<!--@end-->" /><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a>
<!--@if($val['selected'])-->
{@ $menu_3th = $val }
<ul id="contentLeftFourthMenuUl">
<!--@foreach($menu_3th['list'] as $key => $val)--><!--@if($val['+ 'link'])-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<!--@endif--><!--@endforeach-->
</ul>
<!--@end-->
</li>
<!--@endif--><!--@endforeach-->
</ol>
</div>
<!--컨텐트 좌측메뉴 아래 내용-->
<!--@if($layout_info->contentLeftMenuBottom)-->
<div id="contentLeftMenuBottom">
<img src="images/sub_scroll_top.gif" />
<div id="contentLeftMenuBottomContent">
{$layout_info->contentLeftMenuBottom}
</div>
<img src="images/sub_scroll_bottom.gif" />
</div>
<!--@end-->
</div>
<div id="contentRight">
{$content}
</div>
</div>
<div id="footer">
<img style="float:left;" src="images/footer_barBgLeft.gif" />
<div id="footerContent">
<!--하단로고-->
<!--@if($layout_info->footerLogo)-->
<div id="footerLogo">
<a style="width:123px; height:55px; display:block;" href="{$layout_info->footerLogoUrl}"><img src="{$layout_info->footerLogo}" width="123" height="55" /></a>
</div>
<!--@end-->
<!--하단로고 우측 주소,저작권정보 등-->
<!--@if($layout_info->footerCopyright)-->
<div id="footerCopyright">
{$layout_info->footerCopyright}
</div>
<!--@end-->
<a id="footerTopImage" style="width:38px; height:17px; display:block;" href="#"><img src="images/footer_btn_top.gif" /></a>
</div>
<img src="images/footer_barBgRight.gif" />
</div>
</div>
<script>
firstMenuLength=headerMenuFirstUl.children.length;
//선택된 상단 1차메뉴의 2차메뉴 위치변경하고 나타나게 하는 스크립트
<!--@if($main_menu->list)-->
firstMenuWidth=0;
for(i=1;i<=firstMenuLength;i++){
if(headerMenuFirstUl.children[i-1].className=="on"){
for(j=1;j<=i;j++){
firstMenuWidth=firstMenuWidth+headerMenuFirstUl.children[j-1].offsetWidth;
}
document.getElementById("headerMenuSecondOl"+i).style.display="block";
}
else{
document.getElementById("headerMenuSecondOl"+i).style.display="none";
}
}
if(headerMenuFirstUl.children[0].className=="on"){
headerMenuSecond.style.left=firstMenuWidth-headerMenuFirstUl.children[0].offsetWidth+35;
}
else{
headerMenuSecond.style.left=firstMenuWidth-headerMenuFirstUl.children[0].offsetWidth+37;
}
<!--@end-->
//마우스 오버 시 상단 2차메뉴 위치변경하고 나타나게 하는 함수
function showSubmenu(n){
<!--@if($main_menu->list)-->
firstMenuWidth=0;
for(i=1;i<=n;i++){
headerMenuFirstUl.children[i-1].className="on";
firstMenuWidth=firstMenuWidth+headerMenuFirstUl.children[i-1].offsetWidth;
headerMenuFirstUl.children[i-1].className="off";
}
headerMenuSecond.style.left=firstMenuWidth-headerMenuFirstUl.children[0].offsetWidth+33;
for(i=1;i<=firstMenuLength;i++){
headerMenuFirstUl.children[i-1].className="off";
document.getElementById("headerMenuSecondOl"+i).style.display="none";
}
headerMenuFirstUl.children[n-1].className="on";
document.getElementById("headerMenuSecondOl"+n).style.display="block";
<!--@end-->
}
//상단 2차메뉴 마지막 목록 오른쪽 여백 및 마디 없애는 스크립트
for(i=1;i<=firstMenuLength;i++){
secondMenuLength=document.getElementById("headerMenuSecondOl"+i).children.length;
if(secondMenuLength!=0){
document.getElementById("headerMenuSecondOl"+i).children[secondMenuLength-1].style.background="none";
}
}
//상단 2차메뉴 우측 로그인 정보 마지막 목록 여백 및 마디 없애는 스크립트
loginUlLength=headerMenuBottomRightLoginUl.children.length;
headerMenuBottomRightLoginUl.children[loginUlLength-1].style.paddingRight=0;
headerMenuBottomRightLoginUl.children[loginUlLength-1].style.marginRight=0;
headerMenuBottomRightLoginUl.children[loginUlLength-1].style.background="none";
//상단 2차메뉴 우측 로그인정보 클릭 시 나타나는 로그인폼
loginNum=0;
function showLoginForm(){
if(loginNum==0){
headerMenuBottomRightLoginWiget.style.display="block";
loginNum=1;
}
else{
headerMenuBottomRightLoginWiget.style.display="none";
loginNum=0;
}
}
//컨텐트 좌측 우측 위쪽위치 같게하는 스크립트
contentRight.style.marginTop=0-contentLeft.offsetHeight;
//4차메뉴 마지막 목록 배경라인 다르게 나타나게 하는 스크립트
<!--@if($menu_3th['list'+ '])-->
fourthMenuLength=contentLeftFourthMenuUl.children.length;
contentLeftFourthMenuUl.children[fourthMenuLength-1].className="last";
<!--@end-->
</script>
해당 왼쪽 매뉴인 #contentLeft 에 css속성(float)가 지정되지 않아서 생기는 문제입니다
float: left;
를 지정해주세요.
css 주소가
layouts/kindguyLayout(khan_200911_2)/css/default.css
인것 갔은데요
#contentLeft { width:140px; }
위에 줄 " float:left; " 추가해주세요.
#contentLeft { width:140px; float:left; }
구글 크롬이나 사파리는 웹 표준을 상대적으로 엄격하게 지키기로 유명하죠
구글 크롬 8.0 Dev 버전에서 확인 했습니다.