[CSS] 크롬에서 IE랑 다르게 추천수 박스의 추천숫자가 탈출을 하는데.. . > 그누4 질문답변

그누4 질문답변

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

[CSS] 크롬에서 IE랑 다르게 추천수 박스의 추천숫자가 탈출을 하는데.. . 정보

[CSS] 크롬에서 IE랑 다르게 추천수 박스의 추천숫자가 탈출을 하는데.. .

본문

배추스킨의 proc/mw.good.php 에서 정하는 부분인데요

css 초보라 IE에서는 원하는대로 나오는데 크롬에서가 문제네요...

.good-box span { float:left; margin:40px 0 0 33x; font-size:15px; font-weight:bold; color:#000000; }
 
바로 이 부분이 문제인데요 일단 크롬에서는 margin이 안먹고

IE에서는 float을 left가 아니라 center로 해주면 margin이 안먹어요ㅋㅋ

가령 이렇게 해주면 모양이 같아지긴 하는데 1번째 사진의 크롬처럼 margin-top이 안먹히죠....

.good-box span { float:center; margin:40px 0 0 0x; font-size:15px; font-weight:bold; color:#000000; }
   
padding도 마찬가지고요.. 그래서 혹시 이 부분이 아니라 전체 박스 크기 같은거에

영향을 받나 싶기도 하고....


몇시간쨰 이것때문에 멘붕임돠 ㅠㅠㅠ


도움 부탁드려요 ㅠ 참고로 아이콘 사이즈는 78x78 입니다.

-----------------------------------------------------------------------------------------
include_once("_common.php");
include_once("$board_skin_path/mw.lib/mw.skin.basic.lib.php");

header("Content-Type: text/html; charset=$g4[charset]");
$gmnow = gmdate("D, d M Y H:i:s") . " GMT";
header("Expires: 0"); // rfc2616 - Section 14.21
header("Last-Modified: " . $gmnow);
header("Cache-Control: no-store, no-cache, must-revalidate"); // HTTP/1.1
header("Cache-Control: pre-check=0, post-check=0, max-age=0"); // HTTP/1.1
header("Pragma: no-cache"); // HTTP/1.0

$img_path = "$g4[url]/skin/board/$board[bo_skin]/img/";

if ($mw_basic[cf_good_graph])
{
    $good_box_width = 78;
    $wgg = @(($good_box_width-20)/($write[wr_good]+$write[wr_nogood]))*$write[wr_good]+10;
    $wgn = @(($good_box_width-20)/($write[wr_good]+$write[wr_nogood]))*$write[wr_nogood]+10;
    if ($wgg == 10 && $wgn == 10) {
        $wgg = $good_box_width/2;
        $wgn = $good_box_width/2;
    }

?>
    <style type="text/css">
    .good-box { text-align:center; font-size:11px; font-weight:bold; color:#fff; margin:50px 0 20px 0; }
    .good-box .in { text-align:center; width:<?=$good_box_width+130?>px; height:30px; margin:0 auto; }
    .good-box .bg { float:left; }
    .good-box .bn { float:right; }
    .good-box .gh { float:left; width:<?=$good_box_width+2?>px; margin:8px 0 0 4px; }
    .good-box .gh .gg { background:url(<?=$img_path?>/graph_good.gif); width:<?=$wgg?>px; height:14px; float:left; }
    .good-box .gh .gn { background:url(<?=$img_path?>/graph_nogood.gif); width:<?=$wgn?>px; height:14px; float:left; margin:0 0 0 2px; }
    .good-box .gh span { display:block; padding:0; margin:2px 0 0 0; height:12px; line-height:12px; }
    </style>
    <div class="good-box">
    <div class="in">
        <div class="bg"><img src="<?=$img_path?>/btn_good2.gif" border="0" onclick="mw_good_act('good')" style="cursor:pointer;"></a></div>
        <div class="gh">
            <div class="gg"><span><?=number_format($write[wr_good])?></span></div>
            <div class="gn"><span><?=number_format($write[wr_nogood])?></span></div>
        </div>
        <div class="bn"><img src="<?=$img_path?>/btn_nogood2.gif" border="0" onclick="mw_good_act('nogood')" style="cursor:pointer;"></div>
    </div>
    </div>

<?
} else {
    if (!$board[bo_use_good] || !$board[bo_use_nogood])
        $good_box_width = 78;
    else
        $good_box_width = 210;
?>

    <style type="text/css">
    .good-box { margin:50px auto 20px auto; text-align:center; }
    .good-box .in { text-align:center; width:<?=$good_box_width?>px; height:78px; margin:0 auto; }
    .good-box span { float:left; margin:40px 0 0 33x; font-size:15px; font-weight:bold; color:#000000; }
    .good-box .gg { width:78px; height:78px; float:left; cursor:pointer; background:url(<?=$img_path?>/btn_good.gif); }
    .good-box .gn { width:78px; height:78px; float:left; cursor:pointer; background:url(<?=$img_path?>/btn_nogood.gif); margin:0 0 0 10px; }
    </style>
    <div class="good-box"><div class="in">
        <? if ($board[bo_use_good]) { ?><div class="gg" onclick="mw_good_act('good')"><span><?=number_format($write[wr_good])?></span></div><? } ?>
        <? if ($board[bo_use_nogood]) { ?><div class="gn" onclick="mw_good_act('nogood')"><span><?=number_format($write[wr_nogood])?></span></div><? } ?>
    </div></div>

<? } ?>
  • 복사

댓글 전체

float:center가 아니라 text-align:center이 아닌가요?


 <style type="text/css">
    .good-box { margin:50px auto 20px auto; text-align:center; }
    .good-box .in { text-align:center; width:<?=$good_box_width?>px; height:78px; margin:0 auto; overflow:hidden}
    .good-box span {text-align:center;margin:40px 0 0 33x; font-size:15px; font-weight:bold; color:#000000; }
    .good-box .gg { width:78px; height:78px; float:left; cursor:pointer; background:url(<?=$img_path?>/btn_good.gif);padding-top:40px }
    .good-box .gn { width:78px; height:78px; float:left; cursor:pointer; background:url(<?=$img_path?>/btn_nogood.gif); margin:0 0 0 10px; }
</style>

이렇게 good-box span에 text-align:center로 중앙 정렬
good-box span를 감싸는 good-box .gg에 padding-top:40px으로 높이 조절
감사합니다 !
답변내용 참고해서 다음과 같이 했어요

   <style type="text/css"> 
    .good-box { margin:50px auto 20px auto; text-align:center; } 
    .good-box .in { text-align:center; width:<?=$good_box_width?>px; height:78px; margin:0 auto; overflow:hidden} 
    .good-box span {text-align:center;margin:40px 0 0 0x; font-size:15px; font-weight:bold; color:#000000; } 
    .good-box .gg { width:78px; height:78px; float:left; cursor:pointer; background:url(<?=$img_path?>/btn_good.gif);padding-top:40px } 
    .good-box .gn { width:78px; height:78px; float:right; cursor:pointer; background:url(<?=$img_path?>/btn_nogood.gif);padding-top:40px} 
</style>
아 답변 내용중
 .good-box span {text-align:center;margin:40px 0 0 33x; font-size:15px; font-weight:bold; color:#000000; } 에서 margin:40px 0 0 33px 를 margin:0 으로 수정을 하시기 바랍니다.. 실수로 수정을 안해놨었네요.

span 태그와 같은 인라인 속성은 좌우 마진값은 먹히는데 상 하단 마진값은 적용이 안되는걸로 알고 있습니다.
© SIRSOFT
현재 페이지 제일 처음으로