익스플로러와 크롬의 div 설정 > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

익스플로러와 크롬의 div 설정 정보

익스플로러와 크롬의 div 설정

본문

게시판 스킨을 일정 게시판을 사용하고 있는데

익스플로러와 크롬 div 설정에 있어서 차이가 발생합니다

위의 이미지가 익스고

아래의 이미지가 크롬인데

익스플로러에서만 제대로 나오고 나머지 브라우저에서는 다 깨져서 나옵니다.

div 아래 공간때문에 발생하는 문제같은데 해결할수 있는 방법이 없을까요??

댓글 전체

<ul style="display:inline-block">
  <li style="float:left"></li> <li style="float:left"></li>
</ul>

display:inline-block 을 이용하는 방법과.

크롬에서는 padding 이 이상하게 작동하더군요

그래서 가능한한 padding 안쓰고 margin으로 씁니다.
<div style='display:inline-block'> 을 사용하면 표가 완전히 깨집니다..ㅠㅠ

스타일 시트는

#box_list2{width:100%; margin-left:7px; }
#box00{font-family:NanumGothicBoldWeb;width:50px;float:left;}
#box01{font-family:NanumGothicBoldWeb;width:40%;float:left;}
#box02{font-family:NanumGothicBoldWeb;width:40%;float:left;}
#box03{font-family:NanumGothicBoldWeb;width:10%;float:left;}

해당 출력 일정은

$html_day[$i].= "
<div id='box_list2'>
<div id='box01'>[$row[ca_name]]<a onmouseover=\"showLayers('popup_schd".$j."')\" onmouseout=\"startTimer(this)\"  href='$g4[bbs_path]/board.php?bo_table=$bo_table&year=$year&month=$month&wr_id=$row[wr_id]&mode=m' style='font-family:NanumGothicBoldWeb; padding-left:5px'>$row[wr_subject]&nbsp;&nbsp;$row[wr_4] - $row[wr_5]&nbsp;&nbsp;$row[wr_6]</a></div>

<div id='box02'><font color=#131313>$from_date $row[wr_2] ~ $to_date $row[wr_3]</font></div>

<div id='box03'><font color=#e04f00>$row[wr_7]</font></div>

</div>"."\n";
#box_list2{width:100%; display:inline-block;}

<div id="box_list2">
<div style="margin-left:7px">

<div id='box01'>[$row[ca_name]]<a onmouseover=\"showLayers('popup_schd".$j."')\" onmouseout=\"startTimer(this)\"  href='$g4[bbs_path]/board.php?bo_table=$bo_table&year=$year&month=$month&wr_id=$row[wr_id]&mode=m' style='font-family:NanumGothicBoldWeb; padding-left:5px'>$row[wr_subject]&nbsp;&nbsp;$row[wr_4] - $row[wr_5]&nbsp;&nbsp;$row[wr_6]</a></div>

<div id='box02'><font color=#131313>$from_date $row[wr_2] ~ $to_date $row[wr_3]</font></div>

<div id='box03'><font color=#e04f00>$row[wr_7]</font></div>



</div>
</div>

이렇게 해보라는 말씀이었는데요.
크롬 요소 검사를 사용했을 때 해당 숫자 div 크기가 자동으로 세로 21px로 설정됩니다.

익스플로러는 그렇지 않아서 해당 숫자 div 영역 밑에도 자동으로 공간이 채워지는거 같은데...
소스코드를 다 올려주신 거 같지 않아, 완벽한 파악은 힘듭니다만,

저 코드를 보니, #box00 이 외부로 빠져 있는 것 같네요.( 숫자 담당 div)

#box_list2 내부에 <div id="box00">12</div> 가 있어야 할 것 같구요.

내용을 보면 for 문이 돌고 있는 것 같습니다.

위의 <div id="box00"></div> 을  if 문으로 싸서 처음일 경우에만 출력해야 할 듯 보입니다.

마지막으로 id 는 한페이지에 한번이상 선언하면 이상 증상이 있을 수 있습니다.

class 로 바꾸는 것이 좋을 것 같습니다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

include_once("$board_skin_path/moonday.php"); // 석봉운님의 음력날짜 함수

//가로 세로 폭 지정
if (eregi('%', $width)) { $col_width = "14%"; }
else { $col_width = round($width/7); }

$prevmonth = $month - 1;
$nextmonth = $month + 1;
$prevyear = $year;
$nextyear = $year;
if ($month == 1) {
  $prevmonth = 12;
  $prevyear = $year - 1;
} elseif ($month == 12) {
  $nextmonth = 1;
  $nextyear = $year + 1;
}

//$maxdate = date(t, mktime(0, 0, 0, $month, 1, $year));  // the final date of $month
//$offset  = date(w, mktime(0, 0, 0, $month, 1, $year));

$today = getdate();
$b_mon = $today['mon'];
$b_day = $today['mday'];
$b_year = $today['year'];
if ($year < 1) { // 오늘의 달력 일때
  $month = $b_mon;
  $mday = $b_day;
  $year = $b_year;
}

$lastday=array(0,31,28,31,30,31,30,31,31,30,31,30,31);
if ($year%4 == 0) $lastday[2] = 29;
$dayoftheweek = date("w", mktime (0,0,0,$month,1,$year));
?>
<!--년, 월 form 스크립트 -->
<script language="JavaScript">
<!--
function namosw_goto_byselect(sel, targetstr)
{
  var index = sel.selectedIndex;
  if (sel.options[index].value != '') {
    if (targetstr == 'blank') {
      window.open(sel.options[index].value, 'win1');
    } else {
      var frameobj;
      if (targetstr == '') targetstr = 'self';
      if ((frameobj = eval(targetstr)) != null)
        frameobj.location = sel.options[index].value;
    }
  }
}

// 레이어 뷰 스크립트
var iDelay = 80 // Delay to hide in milliseconds
var iNSWidth=250 // Default width for netscape
var sDisplayTimer = null, oLastItem

function getRealPosition(i,which) {
iPos = 0
while (i!=null) {
iPos += i["offset" + which]
i = i.offsetParent
}
return iPos
}
function showLayers(sDest,itop,ileft,iWidth) {
if (document.all!=null) {
var i = window.event.srcElement
stopTimer()
dest = document.all[sDest]
if ((oLastItem!=null) && (oLastItem!=dest))
hideItem()
if (dest) {
// Netscape Hack
if (i.offsetWidth==0)
if (iWidth)
i.offsetWidth=iWidth
else
i.offsetWidth=iNSWidth;
if (ileft)
dest.style.pixelLeft = ileft
else
dest.style.pixelLeft = getRealPosition(i,"Left") - 5 // 불러오는 메뉴 좌표
// dest.style.pixelLeft = getRealPosition(i,"Left") + i.offsetWidth *0.1 // 불러오는 메뉴 좌표
if (itop)
dest.style.pixelTop = itop
else
  dest.style.pixelTop = getRealPosition(i,"Top") + 15 // 불러오는 메뉴 좌표
dest.style.visibility = "visible"
}
oLastItem = dest
}
}

function stopTimer() {
clearTimeout(sDisplayTimer)
}

function startTimer(el) {
if (!el.contains(event.toElement)) {
stopTimer()
sDisplayTimer = setTimeout("hideItem()",iDelay)
}
}

function hideItem() {
if (oLastItem)
oLastItem.style.visibility="hidden"
}

function checkOver() {
if ((oLastItem) && (oLastItem.contains(event.srcElement))) {
stopTimer()
}
}

function checkOut() {
if (oLastItem==event.srcElement)
startTimer(event.srcElement)
}

document.onmouseover = checkOver
document.onmouseout = checkOut
//-->
</SCRIPT>
<style type="text/css">
/* 카테고리 스타일*/
#box_day{width:45px; padding-left: 7px; padding-top: 4px; font-size:12pt; font-family:NanumGothicBoldWeb; font-weight:bold; float:left;}
#box_list{width:100%; height:30px; margin:0px; padding:0px }
#box_list2{width:100%; padding-left:7px;}

#box00{font-family:NanumGothicBoldWeb;width:50px;float:left;}
#box01{font-family:NanumGothicBoldWeb;width:40%;float:left;}
#box02{font-family:NanumGothicBoldWeb;width:40%;float:left;}
#box03{font-family:NanumGothicBoldWeb;width:10%;float:left;}
#box04{font-family:NanumGothicBoldWeb;width:300px;float:left;}

a.day1:link, a.day1:visited, a.day1:active { font-family:NanumGothicBoldWeb; font-size:14px; text-decoration:none; color:#9e9e9e; }
a.day1:hover { font-family:NanumGothicBoldWeb; font-size:16px;color:#9e9e9e; text-decoration:underline; font-weight:bold; }

a.day2:link, a.day2:visited, a.day2:active { font-family:NanumGothicBoldWeb; font-size:14px; text-decoration:none; color:#9e9e9e; }
a.day2:hover { font-family:NanumGothicBoldWeb; font-size:16px;color:#9e9e9e; text-decoration:underline; font-weight:bold; }

a.day3:link, a.day3:visited, a.day3:active { font-family:NanumGothicBoldWeb; font-size:14px; text-decoration:none; color:#9e9e9e; }
a.day3:hover { font-family:NanumGothicBoldWeb; font-size:16px;color:#9e9e9e; text-decoration:underline; font-weight:bold; }

.day4 {font-family:Trebuchet MS;font-size:20px;color:#a5c42b;}
.day5 {font-family:NanumGothicBoldWeb;font-size:14px;color:#eeeeee;}
</style>

<table width="100%" height="39" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom">
<a href='board.php?bo_table=<?=$bo_table?>&mode=m2'><img src="<?=$board_skin_path?>/img/tab01_off.gif" border="0"></a><a href='board.php?bo_table=<?=$bo_table?>&mode=m'><img src="<?=$board_skin_path?>/img/tab02_on.gif" border="0"></a><a href='board.php?bo_table=<?=$bo_table?>&mode=w'><img src="<?=$board_skin_path?>/img/tab03_off.gif" border="0"></a><a href='board.php?bo_table=<?=$bo_table?>&mode=l'><img src="<?=$board_skin_path?>/img/tab04_off.gif" border="0"></a></td>
<td align="right">

<div align="right">
</span><span class="day4"><?=$year?></span><span class="day5">년</span>
<a href="<?="$_SERVER[PHP_SELF]?bo_table=$bo_table&mode=m"?><?if ($month == 1) { $year_pre=$year-1; $month_pre=$month; } else {$year_pre=$year-1; $month_pre=$month;} echo ("year=$year_pre&month=$month_pre");?>" target="_self" onfocus="this.blur()"><img src="<?=$board_skin_path?>/img/btn_dw.gif" border="0" title="<?=$year_pre?>년" align="absmiddle" /></a> <a href="<?="$_SERVER[PHP_SELF]?bo_table=$bo_table&mode=m"?><?if ($month == 12) { $year_pre=$year+1; $month_pre=$month; } else {$year_pre=$year+1; $month_pre=$month;} echo ("&year=$year_pre&month=$month_pre");?>" target="_self" onfocus="this.blur()"><img src="<?=$board_skin_path?>/img/btn_up.gif" border="0" title="<?=$year_pre?>년" align="absmiddle" /></a> <span class="day4">
<?=$month?>
</span><span class="day5">월</span> <a href="<?="$_SERVER[PHP_SELF]?bo_table=$bo_table&mode=m"?><?if ($month == 1) { $year_pre=$year-1; $month_pre=12; } else {$year_pre=$year; $month_pre=$month-1;} echo ("year=$year_pre&month=$month_pre");?>" target="_self" onfocus="this.blur()"><img src="<?=$board_skin_path?>/img/btn_dw.gif" border="0" title="<?=$month_pre?>월" align="absmiddle" /></a> <a href="<?="$_SERVER[PHP_SELF]?bo_table=$bo_table&mode=m"?><? if ($month == 12) { $year_pre=$year+1; $month_pre=1; } else {$year_pre=$year; $month_pre=$month+1;} echo ("&year=$year_pre&month=$month_pre");?>" target="_self" onfocus="this.blur()"><img src="<?=$board_skin_path?>/img/btn_up.gif" border="0" title="<?=$month_pre?>월" align="absmiddle" /></a></div> </td>
</tr>
<tr><td height="1" colspan="2" bgcolor="#B7BDCC"></td></tr>
<tr><td height="10" colspan="2"></td></tr>
</table>

<table width="100%" border="0" height="30" background="<?=$board_skin_path?>/img/bg_cal_day.gif" style="border: 1px solid #B7BDCC;">
  <tr>
    <td height="30">
<div id='box00' align="center">Day</div>
<div id='box01' align="center">Match</div>
<div id='box02' align="center">Time</div>
<div id='box03' align="center">Stadium</div>
  </tr>
</table>


<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-left: 1px solid #B7BDCC; border-right: 1px solid #B7BDCC;">
<?
$cday = 1;
$cel_mon = sprintf("%02d",$month);

$query = "SELECT * FROM $write_table WHERE left(wr_link1,6) <= '$year$cel_mon' and left(wr_link2,6) >= '$year$cel_mon' ORDER BY wr_id ASC";
$result = sql_query($query);

$j=0; // layer id
// 내용을 보여주는 부분
while ($row = mysql_fetch_array($result)) {
  if( substr($row[wr_link1],0,6) <  $year.$cel_mon ) {
$start_day =1;
$start_day= (int)$start_day;
  } else {
$start_day = substr($row[wr_link1],6,2);
    $start_day= (int)$start_day;
  }

  if( substr($row[wr_link2],0,6) >  $year.$cel_mon ) {
$end_day = $lastday[$month];
$end_day= (int)$end_day;
  } else {
$end_day = substr($row[wr_link2],6,2);
$end_day= (int)$end_day;
  }

for ($i = $start_day ; $i <= $end_day;  $i++) {

$j++; // layer ID

    $from_date = str_replace("http://","",$row[wr_link1]);
    $to_date = str_replace("http://","",$row[wr_link2]);
    $from_date = substr($from_date,0,4)."년 ".sprintf("%2d",substr($from_date,4,2))."월 ".sprintf("%2d",substr($from_date,6,2))."일";
    $to_date  = substr($to_date,0,4)."년 ".sprintf("%2d",substr($to_date,4,2))."월 ".sprintf("%2d",substr($to_date,6,2))."일";


$html_day[$i].= "<div id='box_list2'>
<div id='box01'>[$row[ca_name]]<a onmouseover=\"showLayers('popup_schd".$j."')\" onmouseout=\"startTimer(this)\"  href='$g4[bbs_path]/board.php?bo_table=$bo_table&year=$year&month=$month&wr_id=$row[wr_id]&mode=m' style='font-family:NanumGothicBoldWeb; padding-left:5px'>$row[wr_subject]&nbsp;&nbsp;$row[wr_4] - $row[wr_5]&nbsp;&nbsp;$row[wr_6]</a></div>

<div id='box02'><font color=#131313>$from_date $row[wr_2] ~ $to_date $row[wr_3]</font></div>

<div id='box03'><font color=#e04f00>$row[wr_7]</font></div>
</div>"."\n";
?>

<DIV ID="popup_schd<?=$j?>" onmouseout="startTimer(event.srcElement)" style="BORDER-RIGHT: #B0BD2C 1px solid; BORDER-TOP: #B0BD2C 1px solid; BORDER-LEFT: #B0BD2C 1px solid; BORDER-BOTTOM: #B0BD2C 1px solid;  BACKGROUND-COLOR: #C9D832; FILTER: alpha(opacity=90); padding: 5 5 5 5; POSITION: absolute; width:400px; margin-top:-180px; margin-left:-180px;  visibility: hidden; Z-INDEX:1; font-family:NanumGothicBoldWeb;">

<?
$html = 0;
if (strstr($row[wr_option], "html1"))
    $html = 1;
else if (strstr($row[wr_option], "html2"))
    $html = 2;

$viewlist = cut_str(conv_content($row[wr_content], $html),1000,"…");
echo "<b><font color=#8b8b8b>$row[wr_subject]&nbsp;&nbsp;$row[wr_4] - $row[wr_5]&nbsp;&nbsp;$row[wr_6]</font></b><br>";

if($from_date != $to_date) {
echo "<b><font color=#8b8b8b>기간 : $from_date $row[wr_2] ~ $to_date $row[wr_3]</font></b><br>";
} else {
echo "<b><font color=#8b8b8b>기간 : $from_date $row[wr_2]</font></b><br>";
}

echo "<b><font color=#8b8b8b>Stadium : ".$row[wr_7]."</font></b><br>";
echo "<br>";
echo $viewlist;
?>
</DIV>
<?
}
}
?>

<?
  // 달력의 틀을 보여주는 부분

  $temp = 7- (($lastday[$month]+$dayoftheweek)%7);

  if ($temp == 7) $temp = 0;
    $lastcount = $lastday[$month]+$dayoftheweek + $temp;

  for ($iz = 1; $iz <= $lastcount; $iz++) { // 42번을 칠하게 된다.
    $bgcolor = "#ffffff";  // 쭉 흰색으로 칠하고
    if ($b_year==$year && $b_mon==$month && $b_day==$cday) $bgcolor = "#EEF1D4";      //  "#DFFDDF"; // 오늘날짜 연두색으로 표기
    if (($iz%7) == 1) echo ("<tr>"); // 주당 7개씩 한쎌씩을 쌓는다.
    if ($dayoftheweek < $iz  &&  $iz <= $lastday[$month]+$dayoftheweek) {
      // 전체 루프안에서 숫자가 들어가는 셀들만 해당됨
      // 즉 11월 달에서 1일부터 30 일까지만 해당
      $daytext = "$cday";  // $cday 는 숫자 예> 11월달은 1~ 30일 까지
      //$daytext 은 셀에 써질 날짜 숫자 넣을 공간
      $daycontcolor = "" ;
      $daycolor = "";
      if ($iz%7 == 1) {$daycolor = "#E75A53"; $bgcolor = "#FFE6FF";} // 일요일
      if ($iz%7 == 0) {$daycolor = "#6c91c3"; $bgcolor = "#D7E8F8";} // 토요일

// 여기까지 숫자와 들어갈 내용에 대한 변수들의 세팅이 끝나고

// 이제 여기 부터 직접 셀이 그려지면서 그 안에 내용이 들어 간다.
echo ("<tr><td class=tbline3 bgcolor=$bgcolor valign=top onmouseover=this.style.backgroundColor='#dbffb2' onmouseout=this.style.backgroundColor=''>\n");

      $f_date = $year.sprintf("%02d",$month).sprintf("%02d",$cday);

      // 기념일 파일 내용 비교위한 변수 선언, 월과 일을 두자리 포맷으로 고정
      if (strlen($month) == 1) {
        $monthp = "0".$month ;
      } else {
        $monthp = $month ;
      }
      if (strlen($cday) == 1) {
        $cdayp = "0".$cday ;
      } else {
        $cdayp = $cday ;
      }
      $memday = $year.$monthp.$cdayp;
      // *.0000 파일인 해마다 동일한 양력기념일은 월일로만 구분한다.
      if( !file_exists($file_index.".".$year)) { $memday = $monthp.$cdayp; }
      $daycont = "" ;

      // 년월일 8자리 또는 4자리를 잘라 비교하여 뒷 문장을 출력
      for($i=0 ; $i < sizeof($dayfile) ; $i++) {  // 파일 첫 행부터 끝행까지 루프
        if($memday == substr($dayfile[$i],$cutpoint1,$cutpoint2)){$daycont = substr($dayfile[$i],9,strlen($dayfile[$i])-10);
        // r,b,y,g 구분자로 글자색깔 구분
        $daycl = substr($dayfile[$i],0,1) ;
        if($daycl == "r"){
          $daycontcolor = "red" ; // 휴일
          $daycolor = "red";
        }
        else if($daycl == "y"){$daycontcolor = "brown" ;} // 생일
        else if($daycl == "g"){$daycontcolor = "gray" ;} // 음력
        else{$daycontcolor = "blue" ;}
      }
    }

    // 석봉운님의 음력날짜 변수선언
    $myarray = soltolun($year,$month,$cday);
    if ($myarray[day]==1 || $myarray[day]==11 || $myarray[day]==21) {
      //$moonday ="<font color=gray>&nbsp;(음)$myarray[month].$myarray[day]$myarray[leap]</font>";
  $moonday="";
    } else {
      $moonday="";
    }

    //include("$schedule_file.moon"); // 음력절기 & 음력기념일
    if ($annivmoonday&&$daycont) $blank="<br>"; // 음력절기와 양력기념일이 동시에 있으면 한칸 띔
    else $blank="";

//글쓰기 권한여부
if ($write_href) {
echo "<div id='box_day' align='center'><a href='$write_href&f_date=$f_date&t_date=$f_date&mode=m' style='font-family:NanumGothicBoldWeb; font-size:12px;'><font color='$daycolor' style='font-family:NanumGothicBoldWeb;'>$daytext</font></a></div>\n";
}
else {
echo "<div id='box_day' align='center'><font color='$daycolor' style='font-family:NanumGothicBoldWeb; font-size:12px;'>$daytext</font></div>\n";
}

echo "<div id='box_list'>$html_day[$cday]</div>\n";
echo ("</td></tr>\n");  // 한칸을 마무리

$cday++; // 날짜를 카운팅
}

// 날짜가 없을경우
else { echo ("\n"); }

if (($iz%7) == 0) echo ("</tr>\n");
}
?>

</table>




해당 소스코드 전문입니다

다른 분처럼 넣는건 어떻게 하는지 몰라서 일단 복사해서 넣어 보아요ㅠㅠ
$html_day[$i].= "<div id='box_list2'><div id='box00' align="center">&nbsp;</div>
<div id='box01'>[$row[ca_name]]<a onmouseover=\"showLayers('popup_schd".$j."')\" onmouseout=\"startTimer(this)\"  href='$g4[bbs_path]/board.php?bo_table=$bo_table&year=$year&month=$month&wr_id=$row[wr_id]&mode=m' style='font-family:NanumGothicBoldWeb; padding-left:5px'>$row[wr_subject]&nbsp;&nbsp;$row[wr_4] - $row[wr_5]&nbsp;&nbsp;$row[wr_6]</a></div>

<div id='box02'><font color=#131313>$from_date $row[wr_2] ~ $to_date $row[wr_3]</font></div>

<div id='box03'><font color=#e04f00>$row[wr_7]</font></div>
</div>"."\n";


윗부분처럼 하시면, 일단 문제는 해결될 것 같이 보입니다.

다만, id를 class 로 수정하는 것이 좋을 것 같습니다.
전체 66,554 |RSS
그누4 질문답변 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT