[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>
<? } ?>
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 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 태그와 같은 인라인 속성은 좌우 마진값은 먹히는데 상 하단 마진값은 적용이 안되는걸로 알고 있습니다.
.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 태그와 같은 인라인 속성은 좌우 마진값은 먹히는데 상 하단 마진값은 적용이 안되는걸로 알고 있습니다.