무

CSS 뭐가 문제죠?? (크로스브라우징)

· 2012-06-27 (수) 22:01:43 · 1653 · 1
크롬.png
1.gif
위에가 크롬

아래가 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>

첨부파일

크롬.png (4.1 KB)
0회 2012-06-27 22:01
1.gif (3.6 KB)
0회 2012-06-27 22:01
|

댓글 1개

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

보통 브라우저마다 padding을 width에 포함하냐 안포함하냐의 여부가 조금 다르기 때문에
잘 안될 경우 margin 을 주시거나 아니면 부모 <div> 를 하나 만들어서 부모 div에 padding을 주는 꼼수를 쓰시면 해결 될 듯 보입니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누4 질문답변

66,531건

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

+
제목 글쓴이 날짜 조회
12-06-27 조회 1,059
12-06-27 조회 1,654
12-06-27 조회 1,126
12-06-27 조회 900
12-06-27 조회 1,052
12-06-27 조회 1,083
12-06-27 조회 1,715
12-06-27 조회 1,781
12-06-27 조회 1,705
12-06-27 조회 1,142
12-06-27 조회 1,592
12-06-27 조회 1,106
12-06-27 조회 935
12-06-27 조회 2,446
12-06-27 조회 1,677
12-06-27 조회 1,085
12-06-27 조회 912
12-06-27 조회 1,655
12-06-27 조회 886
12-06-27 조회 824