CSS 뭐가 문제죠?? (크로스브라우징) 정보
CSS 뭐가 문제죠?? (크로스브라우징)본문
위에가 크롬
아래가 IE8 인데요
그림처럼 가로 간격에 문제가 있네요..
padding으로 인해 발생하는 문제고요 width를 그냥 줄이면 크롬에서는 맞는데 익플에서는
짧게나와서 어떻게 해야할지를 모르겠습니다...
아래가 그림 부분의 CSS 고요
#mw-outlogin .login-title { position:absolute; padding:5px 5px 5px 10px; background-color:#ececec; margin:0; width:250px; border-bottom:1px solid #D9D9D9; }
아래는 아웃로그인 스킨2 전체입니다.
<!-- 로그인 후 외부로그인 시작 -->
<div id="mw-outlogin">
<form name="flogin" method="post" action="javascript:flogin_submit(document.flogin);" autocomplete="off">
<input type="hidden" name="url" value="<?=$url?>">
<div class="box-outside">
<div class="box-inside">
<? if ($is_admin == "super" || $is_auth) { ?>
<div class="login-title"><a href="<?=$g4[admin_path]?>/"><strong><?=$nick?></strong></a></div>
<? } else { ?>
<div class="login-title"><strong><?=$nick?></strong></div>
<? } ?>
<div class="login-btn"><a href="<?=$g4[bbs_path]?>/logout.php?url=<?=$urlencode?>"><img src="<?=$outlogin_skin_path?>/img/outlogin2_button.gif" align="absmiddle" border="0"></a></div>
<div class="login-memo"><a href="javascript:win_memo();"><?=$memo_not_read?></a></div>
<div class="login-point"><a href="javascript:win_point();"><?=$point?>p</div>
<div class="login-cash"><a href="<?=$g4[path]?>/plugin/cybercash/"><span class="login-cash-number"><?=number_format($mw_cash[mb_cash])?></span> <?=$mw_cash[cf_cash_unit]?></a></div>
<div class="login-membership">
<span class="scrap"><a href="javascript:win_scrap();">스크랩</a></span>
<span class="div">|</span>
<span class="user"><a href="<?=$g4[bbs_path]?>/member_confirm.php?url=register_form.php">내정보</a></span>
<span class="div">|</span>
<span class="attendance"><a href="<?=$g4[path]?>/plugin/attendance/index.php">출석부</a></span>
</div>
</div>
</div>
</form>
</div>
<!-- 로그인 후 외부로그인 끝 -->
<style type="text/css">
#mw-outlogin a { color:#454545; font-size:8pt; text-decoration:none; }
#mw-outlogin .box-outside { width:250px; height:100px; background-color:#D9D9D9; }
#mw-outlogin .box-inside { position:absolute; margin:1px 0 1px 0; width:250px; height:98px; background-color:#f4f4f4; }
#mw-outlogin .box-inside { line-height:16px; color:#7dacd8; font-size:9pt; font-family:굴림; }
#mw-outlogin .login-title { position:absolute; padding:5px 5px 5px 10px; background-color:#ececec; margin:0; width:250px; border-bottom:1px solid #D9D9D9; }
#mw-outlogin .login-btn { position:absolute; margin:3px 0 0 180px; }
#mw-outlogin .login-point { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-coin.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 15px; }
#mw-outlogin .login-memo { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-memo.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 120px; }
#mw-outlogin .login-cash { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-cash.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 180px; }
#mw-outlogin .login-membership { position:absolute; background-color:#EAEAEA; margin:65px 0 0 10px; padding:5px 0 0 0; width:232px; height:25px; }
#mw-outlogin .login-membership { text-align:center; font-size:9pt; color:#d0e1f1; }
#mw-outlogin .login-membership a { font-size:9pt; }
#mw-outlogin .login-membership .scrap { background:url(<?=$outlogin_skin_path?>/img/ico-scrap.png) no-repeat; margin:2px 0 0 0px; padding:1px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .user { background:url(<?=$outlogin_skin_path?>/img/ico-user.png) no-repeat; margin:3px 0 0 0px; padding:0px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .attendance { background:url(<?=$outlogin_skin_path?>/img/ico-attendance.png) no-repeat; margin:3px 0 0 3px; padding:0px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .div { color:#C8C8C8; margin:3px 0 0 5px; }
</style>
아래가 IE8 인데요
그림처럼 가로 간격에 문제가 있네요..
padding으로 인해 발생하는 문제고요 width를 그냥 줄이면 크롬에서는 맞는데 익플에서는
짧게나와서 어떻게 해야할지를 모르겠습니다...
아래가 그림 부분의 CSS 고요
#mw-outlogin .login-title { position:absolute; padding:5px 5px 5px 10px; background-color:#ececec; margin:0; width:250px; border-bottom:1px solid #D9D9D9; }
아래는 아웃로그인 스킨2 전체입니다.
<!-- 로그인 후 외부로그인 시작 -->
<div id="mw-outlogin">
<form name="flogin" method="post" action="javascript:flogin_submit(document.flogin);" autocomplete="off">
<input type="hidden" name="url" value="<?=$url?>">
<div class="box-outside">
<div class="box-inside">
<? if ($is_admin == "super" || $is_auth) { ?>
<div class="login-title"><a href="<?=$g4[admin_path]?>/"><strong><?=$nick?></strong></a></div>
<? } else { ?>
<div class="login-title"><strong><?=$nick?></strong></div>
<? } ?>
<div class="login-btn"><a href="<?=$g4[bbs_path]?>/logout.php?url=<?=$urlencode?>"><img src="<?=$outlogin_skin_path?>/img/outlogin2_button.gif" align="absmiddle" border="0"></a></div>
<div class="login-memo"><a href="javascript:win_memo();"><?=$memo_not_read?></a></div>
<div class="login-point"><a href="javascript:win_point();"><?=$point?>p</div>
<div class="login-cash"><a href="<?=$g4[path]?>/plugin/cybercash/"><span class="login-cash-number"><?=number_format($mw_cash[mb_cash])?></span> <?=$mw_cash[cf_cash_unit]?></a></div>
<div class="login-membership">
<span class="scrap"><a href="javascript:win_scrap();">스크랩</a></span>
<span class="div">|</span>
<span class="user"><a href="<?=$g4[bbs_path]?>/member_confirm.php?url=register_form.php">내정보</a></span>
<span class="div">|</span>
<span class="attendance"><a href="<?=$g4[path]?>/plugin/attendance/index.php">출석부</a></span>
</div>
</div>
</div>
</form>
</div>
<!-- 로그인 후 외부로그인 끝 -->
<style type="text/css">
#mw-outlogin a { color:#454545; font-size:8pt; text-decoration:none; }
#mw-outlogin .box-outside { width:250px; height:100px; background-color:#D9D9D9; }
#mw-outlogin .box-inside { position:absolute; margin:1px 0 1px 0; width:250px; height:98px; background-color:#f4f4f4; }
#mw-outlogin .box-inside { line-height:16px; color:#7dacd8; font-size:9pt; font-family:굴림; }
#mw-outlogin .login-title { position:absolute; padding:5px 5px 5px 10px; background-color:#ececec; margin:0; width:250px; border-bottom:1px solid #D9D9D9; }
#mw-outlogin .login-btn { position:absolute; margin:3px 0 0 180px; }
#mw-outlogin .login-point { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-coin.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 15px; }
#mw-outlogin .login-memo { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-memo.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 120px; }
#mw-outlogin .login-cash { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-cash.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 180px; }
#mw-outlogin .login-membership { position:absolute; background-color:#EAEAEA; margin:65px 0 0 10px; padding:5px 0 0 0; width:232px; height:25px; }
#mw-outlogin .login-membership { text-align:center; font-size:9pt; color:#d0e1f1; }
#mw-outlogin .login-membership a { font-size:9pt; }
#mw-outlogin .login-membership .scrap { background:url(<?=$outlogin_skin_path?>/img/ico-scrap.png) no-repeat; margin:2px 0 0 0px; padding:1px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .user { background:url(<?=$outlogin_skin_path?>/img/ico-user.png) no-repeat; margin:3px 0 0 0px; padding:0px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .attendance { background:url(<?=$outlogin_skin_path?>/img/ico-attendance.png) no-repeat; margin:3px 0 0 3px; padding:0px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .div { color:#C8C8C8; margin:3px 0 0 5px; }
</style>
댓글 전체
padding을 줄경우 width 포함이냐 아니면 미포함이냐 문제인 듯 싶습니다.
이 문제는 document선언을 xhtml로 안했을 경우 생기는 문제입니다.
(다른 문서 선언시에 어떻게 되는지는 잘모르겠습니다만;;)
보통 브라우저마다 padding을 width에 포함하냐 안포함하냐의 여부가 조금 다르기 때문에
잘 안될 경우 margin 을 주시거나 아니면 부모 <div> 를 하나 만들어서 부모 div에 padding을 주는 꼼수를 쓰시면 해결 될 듯 보입니다.
이 문제는 document선언을 xhtml로 안했을 경우 생기는 문제입니다.
(다른 문서 선언시에 어떻게 되는지는 잘모르겠습니다만;;)
보통 브라우저마다 padding을 width에 포함하냐 안포함하냐의 여부가 조금 다르기 때문에
잘 안될 경우 margin 을 주시거나 아니면 부모 <div> 를 하나 만들어서 부모 div에 padding을 주는 꼼수를 쓰시면 해결 될 듯 보입니다.