CSS 뭐가 문제죠?? (크로스브라우징) > 그누4 질문답변

그누4 질문답변

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

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>

댓글 전체

padding을 줄경우 width 포함이냐 아니면 미포함이냐 문제인 듯 싶습니다.
이 문제는 document선언을 xhtml로 안했을 경우 생기는 문제입니다.
(다른 문서 선언시에 어떻게 되는지는 잘모르겠습니다만;;)

보통 브라우저마다 padding을 width에 포함하냐 안포함하냐의 여부가 조금 다르기 때문에
잘 안될 경우 margin 을 주시거나 아니면 부모 <div> 를 하나 만들어서 부모 div에 padding을 주는 꼼수를 쓰시면 해결 될 듯 보입니다.
전체 66,554 |RSS
그누4 질문답변 내용 검색

회원로그인

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