최근게시물 땡겨 오니깐 div가 밀려서 나오는데요.. > 그누4 질문답변

그누4 질문답변

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

최근게시물 땡겨 오니깐 div가 밀려서 나오는데요.. 정보

최근게시물 땡겨 오니깐 div가 밀려서 나오는데요..

본문



최근게시물을 가져오기 전에는 거의 차이 없었거든요
FF와 IE의 원래 특유의 미세한 차이점 뿐이였는데

최근게시물 넣고 나니깐 저만큼 밀리네요..
FF에서는 원하는 레이아웃이 나오고요 IE에서는 저렇게 밀려서 나오는데
뭐가 문제인지 도저히 모르겠습니다..ㅠㅠ

제발 도와주세요..ㅠㅠ 혼자 공부하는데 물어 볼 사람이 없어요 ㅠㅠ

최근게시물 불러오는 소스는
아래 소스이고요,

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>


<ul class="latest">
<? if (count($list) != 0) { ?>
<? for ($i=0; $i<count($list); $i++) { ?>


<?
if($i==0)

echo $list[$i]['icon_reply'] . " ";
echo "<a href='../love/bbs/board.php?bo_table={$bo_table}&wr_id={$list[$i][wr_id]}'>";
echo "<li>{$list[$i]['subject']}</li>";
echo "</a>";

?>


<? } ?>
<? } ?>
<? if (count($list) == 0) { ?>

게시물이 없습니다.
<? } ?>
</ul>

CSS

#box_latest .latest01{overflow:hidden;float: left; text-align:left; width:228px;}

#box_latest .latest02{overflow:hidden;float: left; text-align:left; width:227px;}

#box_latest .latest03{overflow:hidden;float: left; text-align:left; width:227px;}

#box_latest .latest04{float: left; text-align:left; width:228px;}

#box_latest .line {border-bottom:1px solid #e5e5e5;}


#latest_list01 {float: left; text-align:left; width:200px; margin-right:15px; padding:10px 0 0 13px; background-color:#cccccc;}
#latest_list01 .latest {float:left; list-style-type: none;}
#latest_list01 .latest li {color:#666666; padding:0 0 5px 8px; background: url(http://silverfang.zc.bz/img/latest_icon_arrow.gif) no-repeat 0 30%;}

#latest_list02 {float: left; text-align:left; width:200px; margin-right:14px; padding:10px 0 0 13px; background-color:#cccccc;}
#latest_list02 .latest {float:left; list-style-type: none;}
#latest_list02 .latest li {color:#666666; padding:0 0 5px 8px; background: url(http://silverfang.zc.bz/img/latest_icon_arrow.gif) no-repeat 0 30%;}

#latest_list03 {float: left; text-align:left; width:200px; margin-right:14px; padding:10px 0 0 13px; background-color:#cccccc;}
#latest_list03 .latest {float:left; list-style-type: none;}
#latest_list03 .latest li {color:#666666;padding:0 0 5px 8px; background: url(http://silverfang.zc.bz/img/latest_icon_arrow.gif) no-repeat 0 30%;}

#latest_list04 {float: left; text-align:left; width:200px; margin-right:15px; padding:10px 0 0 13px; background-color:#cccccc;}
#latest_list04 .latest {float:left; list-style-type: none;}
#latest_list04 .latest li {color:#666666; padding:0 0 5px 8px; background: url(http://silverfang.zc.bz/img/latest_icon_arrow.gif) no-repeat 0 30%;}

이렇게 되어 있습니다.

  • 복사

댓글 전체

익스플로러에서는 WIDTH값 적용이 200px 이 적용되어진것이고 파이어폭스에서는 WIDTH 값이 213으로 적용되어졌습니다. 실질적으로 적용된것은 파이어폭스가 맞습니다.

width: 200px; 에 padding: 10px 0 0 13px; 그러니까 padding-left: 13px이 존재하므로 200 + 13 = 213이 되므로 213이 맞는것입니다. 그부분을 찾아서 수정해보시는게

css 핵을 너무 많이 사용하시고 소스가 뒤죽박죽이어서 보기가 힘드네요!
그리고 CSS핵은 가급적 사용하지 않는게 좋습니다.
© SIRSOFT
현재 페이지 제일 처음으로